Sign up for updates.

Deployment Rocket Icon

Basic Download

The free set is available as a single download containing 200 free SVG icons, comprised of 1200 glyphs, corresponding style sheets and deployment examples. This download is NOT intended to be a production asset, rather it’s a demonstration and testing resource. However your are welcome to use it in your projects, provided that an appropriate attribution has been made. To use without attribution you need to buy a royalty free license for the entire set

Installation

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.

Usage

Apply class "icon-" followed by glyph name to desired HTML element. Prefer to use “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-antenna"></i> getting you .

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


96

64

48

32

24

16

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

Regular icons

-roller

HD icons

-roller-hd

Flat icons

-roller-f

Linear icons

-roller-l

Mono icons

-roller-m

Mono icons

-roller-mm


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)} 

Advanced Deployment

Advanced deployment will be available in the beta release. Please sign up to receive email updates or follow us on (social follow icons).

Copyright © 2017 - SnipIcons