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 *

nineteen − 7 =

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

You May Also Like
Read More

Sport Icon Pack

49 free vector icons of Sport designed by iconixar. Download now the free icon pack ‘Sport’. Available source…

Forecast Font – A Web-Font For Weather Icons

Forecast Font is a lovely web-font for using any weather-related icons on our web pages as fonts. The font is pretty awesome as it consists of items that are multi-layered and this provides a huge margin for customization.
Read More

Coronicons Covid-19 Icon Pack

These Covid-19 themed icons are free to anyone that needs them. For use in infographics, marketing materials, web…