iConicss – Pure CSS3/HTML5 icon set

Cool animations! Color and resize it! Just CSS+HTML – no extra dependencies.

What is iConicss?

iConicss is an html5/CSS3 icon set. Each icon uses a single anchor element (one div) and just one color: the currentColor (and transparent) except for the colored icons (as the name suggests). Thus they can easily be included in a page with a single HTML element and use the current color and current font size.

Cool animations! Color and resize it! Just CSS+HTML – no extra dependencies.

So Why use iConicss?

  • Because CSS3 is now widely suported by all main browsers.
  • Because it may result in cool transition and morphing effects when changing icons.
  • Because it’s fun! Like building a Lego®️ model with a limited set of bricks.

How to use it?

All you need is download and include iconicss.min.css in your html page:

<link rel="stylesheet" href="iconicss.min.css">

Then just add icss- classes to an <i> elements to add a new icon on your page:

<i class="icss-home"></i>
<i class="icss-home" style="color:red;"></i>
<i class="icss-home" style="font-size:2em"></i>

To animate the icon when changing just add the icss-anim class to the element.
Then just change the icss-home class to icss-github to let the transition play.

Download: https://github.com/Viglino/iconicss

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

thirteen + 15 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like
Read More

40 Free line icons pack

A very handy set of 40 line vector icons was designed and shared by Giedrius Narusevicius. Impressed, nice…

500 Clean Icons from DealPixel

Icons are definitely a big part of a design, and having high quality icons in your library is really important. That’s why we know you will love the latest deal from DealPixel, 500 Clean Icons, a deal with 500 professional clean icons that you will love. The set is available for only $15. That is a 68% discount!