SmartIcons

Getting Started

Select the icons, then click on the dropdown menu then select the collection you want to add the icons to and click “Add”
Click on “Collections” to view and customize the icons in a collection.
Customize the icons using our visual design tool then click on “Download” to download the package.
Extract the downloaded file (collection-name.zip) which contains following files/folders:
- sprite.svg: the sprite file consists of all the customized icons in the collection.
- sample.html: icon previews.
- SVG folder: seperated SVG icons in the collection.
- icon-component.js: web component to allow you to customize the icon using CSS.
Copy the above files and folders to your project folder.
For sercurity reason, Chrome and Safari need a referrer to load the sprite so you need to run sample.html and your html files under a server. To start a simple HTTP server on your Mac, simply open Terminal, type cd , drag and drop your project folder into Terminal, then type the command python -m SimpleHTTPServer 8000 . Go to http://localhost:8000/sample.html to previews the icons.

You also can use apps such as Anvil to create quick local sites.
Place <script src="icon-component.js"></script> inside <head> of your document if you want to use SmartIcons as web component. This approach enables you to customize the icons using CSS. If you want to serve SVG sprite via xlink, you don't need to include the js file.
Copy and paste the input value under your desired icons in sample.html and paste it into your document, wrap it inside a container for styling purpose.

Add icons into your web pages

There’re three ways to include the icons in your page: using web component, xlink and inline SVG.

Using web component

<div class="icon">
    <svg-icon>
        <src href="svg/si-harmony-air-plane.svg">
        <src href="sprite.svg#si-harmony-air-plane">
    </svg-icon>
</div>

<svg-icon> initializes the container for icon component. You can either include the icons as separated SVGs or symbols in sprite.svg. The icon component will parse the icon to inline SVG for the sake of customization.

Using xlink

You can use xlink to embed the icons. The downside is icons served via xlink cannot be styled using CSS.

<div class="icon">
    <svg>
        <use xlink:href="sprite.svg#si-harmony-air-plane" />
    </svg>
</div>

Inline SVG

Including an inline SVG is easy: in the collection page, click on any icon the click on “Copy SVG” to copy the inline code and paste it into your document.

Basic setup

We need to setup a base size for icons. The good thing is SVG scales proportionally by default; the elements inside a SVG scale to fit the width and height of the SVG, while the ratio aspect stays intact. The most practical way to setup icon size is set its width and height equal so the elements would sit nicely inside their container, regardless the actual size of the elements.

The CSS should look like this:


.icon svg {
  width: 64px;
  height: 64px;
}

Of course, you can set the the dimension in any units:


.icon svg {
  width: 4em;
  height: 4em;
}

Using the visual design tool

The visual design tool is our secret weapon. It is the easiest and quickest way to customize the icons to match the look and feel of your app. You can style 500 icons in a set or individual icons in no time.

Each set has a few customizable elements such as stroke color, stroke size, fill, ... If you want to revert to default style, just click on the reset button.

If you want to customize an icon, just simply click on the icon to open the icon detail modal, hover the class list and apply style to the elements.

Styling with CSS

Theming a set

Unlike HTML, styling SVG is a bit different. You can style following attributes:

stroke: stroke-color , the value could be hex, rgb or rgba.
stroke-width: number , stroke-width is a relative value based on the percentage of the viewport. If the value is set to 1 in the SVG, set stroke-width: 2 will double its stroke width.
fill: color , the value could be hex, rgb or rgba.

Every set has predefined global classes, you can create themes for a set with a few lines of CSS. Our naming convention makes it easy to style the icons consistently. You can click on any icon in your collection to view global class of a set.

Prefix: si-setname , this prefix is applied to all the elements and icons to make sure that there is no conflict with your code.
Suffix -fill to define an element with fill property. You can apply fill: color to element -fill suffix.
Suffix -stroke to define an element with stroke and transparent background. You can apply stroke: color and stroke-width: size to elements with this -stroke suffix
Some sets have classes with -fill and -stroke , that means the element has customizable stroke and fill background.
Some sets have specific suffix. Harmony has -thin-stroke for hairline stroke, -thick-stroke for thicker stroke, Duo has -accent-stroke for prominent stroke, -base-stroke for the base outline.

See the Pen yNvOLy by Min Tran (@mintran) on CodePen.

Styling individual icons

What make SmartIcons stand out is its ability to style the whole set or individually icons with minimal effort. To view the class list for each icon, click on any icon in your collection and hover on the class name to find the element you want to style. We predefined every single element with semantic, meaningful class name so the possibility is endless.

See the Pen LVGWNd by Min Tran (@mintran) on CodePen.