1 Star 0 Fork 0

Gitee 极速下载 / ikonate

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库: https://github.com/mikolajdobrucki/ikonate
Clone or download
Notice: Creating folder will generate an empty file .keep, because not support in Git


npm version

Ikonate are fully customisable & accessible*, well-optimised vector icons.

To learn more about the project and generate the icons online, visit Ikonate.com. In the downloaded .zip file you will find:

  • customised SVG icons as stand-alone files (perfect for designers who don't want to edit code)
  • customised SVG sprite with an html demo
  • customised html demo of the icons as inline SVG

You can also follow the documentation below to generate generic demo files with all the available icons and customise them manually.

Built by @mikolajdobrucki & @mzaremski at ucreate


Git repository

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

git clone https://github.com/eucalyptuss/ikonate.git

Install with npm

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

npm install ikonate


To generate generic demo files and SVG sprites, install npm dependencies first.

npm install

Then, run a build command from the main repo directory.

npm run build

Demo & files structure


All the icons are available as raw, unstyled SVGs at ./ikonate/icons.

Demo files

To view the demo files, remember to run a build command first.

The generated demos of inline SVGs and SVG sprites are available respectively under ./ikonate/build/inline/index.html and ./ikonate/build/sprite/index.html.

IT DOESN'T WORK! If you open the sprite demo directly in your browser, it may not display the icons correctly. To fix it, open it using an local server such as http-server.


As <img> or background-image.

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

To generate your icons as separate styled svg files, visit Ikonate.com.

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

To use icons as inline svg, import the icons you need using a technique appropriate for your project from ./ikonate/icons.

Using this approach, you can later customise the icons with CSS.

As SVG sprite.

Reference: CSS Tricks: SVG use with External Reference

After running the build command successfully, you will find the SVG sprite with all the available icons in ./ikonate/sprite.

To generate your custom optimised SVG sprite, visit Ikonate.com.

Using this approach, you can later customise the icons with CSS.

If you'd like to learn more about different ways of using SVG in your project, check out the following articles:


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


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

Check the demo files for a representative example.

You can also generate the styles and all the customised demo files at Ikonate.com.


Ikonate is NOT accessible out of the box and will never be. We've done our best to follow the best accessibility practices while building this software, but it's your role to adjust it and make it truly accessible inside your project.

E.g. all the titles and descriptions given to the icons should be treated as placeholders and changed in implementation depending on an actual role of each icon. In many cases, you may not need them altogether.

To learn more on this topic, read an excellent article by Chris Coyier: How Can I Make My Icon System Accessible?


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

Comments ( 0 )

Sign in for post a comment


Ikonate图标可以轻松调整,以满足正在设计的品牌或产品的需求 spread retract


No release

Gitee Metrics




load more
can not load any more


103611 48b8ff67 1899542 103622 4d02230c 1899542