Custom Icons

Fully customisable open-source icons.

Installation

Git repository

You can clone this repository to manually install Custom Icons in your project…

git clone https://github.com/eucalyptuss/custom-icons.git

Install with npm

…or you can download the icons using npm package manager.

npm install ucreate-icons

Build

To generate demo files and SVG sprites run a build command from the main repo directory.

npm run build

Demo

The generated demo is available under ./custom-icons/demo/index.html.

IT DOESN't WORK! If you open the file directly in your browser, it may not display the icons correctly. To fix it, open it using a http server such as http-server.

Usage

As <img> or background-image.

Reference: CSS Tricks: Using SVG as an <img>

All the icons are available as separate files at ./custom-icons/icons. Remember that using icons as <img> or background-image, you can't customise them with CSS.

As inline SVG.

Reference: CSS Tricks: Using "inline" SVG

Import the icons you need using a technique appropriate for your project from ./custom-icons/icons.

As SVG sprite.

Reference: CSS Tricks: SVG use with External Reference

If you successfully run the build command you will find the SVG sprite in ./custom-icons/sprite.

If you'd like to learn more about different ways of using SVG in your project please take a look at the following articles:

• A Practical Guide by svgontheweb.com
• Using SVG Tutorial by CSS-Tricks

Customisation

To customise icons with CSS you need to use the icons as either inline SVG or SVG sprite.

You can use the following CSS parameters to customise the icons:

• width
• height
• stroke
• stroke-width
• stroke-linecap
• stroke-linejoin

e.g.:

width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;

License

Ucreate icons are available under the MIT. Feel free to use the set in both personal and commercial projects. Attribution in much appreciated but not required.

Do not resell the icons. If you share the set on the web, always link to the project's page, not directly to the file. Do not repost the file on other websites and services.