iConicss

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>

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>

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.

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>

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>

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>

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>

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

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

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

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

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