Sign up for updates.

How to use Snipicons free set CSS


After extracting content from archive, simply copy "snipicons" folder, containing all SVG files and "snipicons.css" to your websites default directory and include in your project.

<link href="snipicons/snipicons.css" rel="stylesheet" type="text/css">

SVG icons and corresponding style sheets are located in the same directory to avoid long file paths and keep the CSS file at the minimum size.


Apply class "icon-" followed by glyph name to desired HTML element. Try to use semantically “neutral” html elements not to affect the semantic hierarchy of the page, for example <i> or <b> and not <em> or <strong>. Here are some examples of the code and the result.

<b class="icon-home"></b>will get you a or <i class="icon-anchor"></i> getting you .

Default size is set to 18 X 18, in addition there are seven more popular sizes 16, 24, 32, 48, 64, 96 and 128. To change the size, simply apply size class before the glyph class.<i class="icon32 icon-hourglass"></i>

The default style is the “regular” to change it, simply add the appropriate style affix <i class="icon48 icon-roller-hd"></i>

Regular icons

HD icons

Flat icons

Linear icons

Mono icons

Mini icons

Style sheet (CSS)

The style sheet contains all icons with all version, keep only ones you're using to keep the style sheet file size to the minimum.

// Override or define the all classes starting with icons-
[class^="icon-"], [class*=" icon-"] {
   display: inline-block;
   width: 16px;
   height: 16px;
   line-height: 20px;
   background-image: none!important; // removing background image ???
// Define custom icon sizes, we can have them as big as we want 
   .icon24 {height: 24px; width: 24px;}
   .icon32 {height: 32px; width: 32px;}
   .icon48 {height: 48px; width: 48px;}
   .icon64 {height: 64px; width: 64px;}
   .icon96 {height: 96px; width: 96px;}
   .icon128 {height: 128px; width: 128px;}
// SVG artwork is included as content of :before pseudo-element as background is not rendered sharply in Firefox
   .icon-volume-off:before {content: url(volume-off.svg)} 


This icons are licensed under the Creative Commons Attribution-NoDerivatives 4.0 International License. If you are using our free icons please attribute. Attributions help others to find our icons.

Copyright © 2018 - SnipIcons