iConicss

home

Pure CSS3 icons...

« One CSS, one DIV, one icon! »

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

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.

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.

Known limitation

Some side effects may result in some browsers
IE doesn't compute properly the currentColor keyword in the CSS linear-gradient() (it's a known bug since 2014!). This will impact icons that use gradient background-image (just a few ones).

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>

You can change color of icons as simple as set color in CSS.

<i class="icss-home" style="color:red;"></i>

You can change the size of the icon just by changing the font-size in CSS.

<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.

Look at the example page for more usecases.

Examples

Example code

Just as simple as writing HTML with classes.

<i class="icss-home"></i>

Change icon color or size in CSS. It will use the currentColor.

<i class="icss-lamp" style="font-size:3em; color:#a00"></i>

Icon size

Use xsmall, small, x2, x3, x4, x5 classes to size the icons or just set the text-size.

<i class="icss-forklift x5"></i>
<i class="icss-forklift x4"></i>
<i class="icss-forklift x3"></i>
<i class="icss-forklift x2"></i>
<i class="icss-forklift"></i>
<i class="icss-forklift small"></i>
<i class="icss-forklift xsmall"></i>

Transform icons

Use flip class to flip the icon. rot10, rot20, rot45, rot90, rot180 to rotate icons.

<i class="icss-suv-car x3"></i>
<i class="icss-suv-car flip x3"></i>

<i class="icss-suv-car rot10 x3"></i>

<i class="icss-suv-car rot-10 x3"></i>

On icons that already gets a transform (rotation) you may have to stack the icon and set the transform on the parent.

Stacked Icons

To stack multiple icons, use the .icss-stack class on the parent. You can use the sizing classes to adapt the icon size (small, x2, x3).

<span class="icss-stack x4">
  <i class="icss-bicycle small" style="color:#555;"></i>
  <i class="icss-ban" style="color:#a00"></i>
</span>

<span class="icss-stack x4">
  <i class="icss-bicycle xxsmall bottom" style="color:#555;"></i>
  <i class="icss-triangle-o" style="color:orange;"></i>
</span>

<div class="icss-stack x5">
  <i class="icss-blazon" style="color:#09E"></i>
  <i class="icss-css3 small" style="color: #fff;"></i>
  <i class="icss-blazon-o" style="color:#07B"></i>
</div>

Animated Icons

Use icss-spin class to get any icon to rotate and use icss-pulse to have it rotate with 8 steps.
icss-ring, icss-tada will create special effects. You should consider to apply the class on the parent stack to avoid icon's deformation.
icss-reverse will reverse animation direction.
For more animations look at Louis LIN's repo.

<i class="icss-gear icss-spin x2"></i>
<i class="icss-circle-point icss-spin x2"></i>
<i class="icss-power-off icss-spin x2"></i>

<i class="icss-spinner icss-pulse x2"></i>

<i class="icss-dolphin icss-spin icss-reverse x3"></i>

<i class="icss-bell icss-ring x2"></i>

<span class="icss-stack icss-vibes x3">
  <i class="icss-thumb-up"></i>
</span>

<span class="icss-stack icss-tada x2">
  <i class="icss-race-cup"></i>
</span>

Hover animations

Use icss-spin-hover class on stack to get any icon to rotate when cursor hovers it.

<span class="icss-stack icss-spin-hover x3">
    <i class="icss-spinner"></i>
</span>
<span class="icss-stack icss-spin-hover icss-reverse x3">
    <i class="icss-dolphin"></i>
</span>

<span class="icss-stack icss-ring-hover x3">
  <i class="icss-bell"></i>
</span>
<span class="icss-stack icss-vibes-hover x3">
  <i class="icss-hand-pointer"></i>
</span>
<span class="icss-stack icss-tada-hover x3">
  <i class="icss-race-cup"></i>
</span>

Drop shadow

Use the .icss-shadow class on the parent to display drop shadow on icons. Then stack the same icon with different colors.

<span class="icss-shadow x3">
  <i class="icss-bicycle" style="color:#555;"></i>
  <i class="icss-bicycle" style="color:orange;"></i>
</span>

Bonus

As a bonus, a github corner to use on your favorite pages!

Just add a link with a icss-github-corner class and an <i> inside.

<a href="#your_url" class="icss-github-corner"><i></i></a>

Use the icss-github-corner-left class to have it on the left.

<a href="#your_url" class="icss-github-corner-left"><i></i></a>

Customize the colors as you want.

<a href="#your_url"
    class="icss-github-corner"
    style="background-color: #FD6C6C;" 
    title="fork me on github!">
    <i></i>
  </a>

Customize the colors as you want.

<a href="#your_url" 
  class="icss-github-corner"
  style="background-color:#fff; color:#333;" 
  title="fork me on github!" >
  <i></i>
</a>

Helper

iConicss comes with a set of helpers to let you handle icons classes and animation programmatically.

Getting started

For use in a web page, just include the javascript in your page.

<!-- iConicss -->
<script src="iconicss.js"></script>

Changing icons

To change icon of a DOM element use the setClass method.

icss.setClass(element, 'home');

You can use a selector as first argument.

icss.setClass('#myId', 'home');

Animating icons

Use the animate method to animate a sequence of icons.

icss.animate('#myId', {
  // List of icons to animate
  icssName: ['circle','triangle','square','cube','cylender','cone'],
  // delay in ms, default 5s
  delay: 5000, 
  // start animating, default true
  start: true, 
  // random choice, default incremental
  random: false, 
  // callback function on change, default none
  onchange: function() { /* do something */ } 
});

Use the returned value to control animation.

var controler = icss.animate('#myId', {
  icssName: ['circle','triangle','square','cube','cylender','cone'],
  start: false
});
// Start animating
controler.start();
// Pause animation, use start to restart
controler.pause();
// Stop animation
controler.stop();

Handle effects

Use setEffect, removeEffect or toggleEffect methods to handle effects on icons.

// Toggle ring effect to myID
icss.toggleEffect('#myID', 'ring');