--- name: iconic url: /iconic ---

Iconic

We partnered with Iconic to include 24 brilliant, responsive, highly flexible icons for use in your apps. For more info on Iconic or to buy the complete set head to useiconic.com



Search Delete Save Add to Cart

Settings Profile Account

Icon Names


Icon Names

You can add in these sweet icons with this simple markup:

The icons are in the build/assets/img/iconic folder. If you're using the data-src attribute, you can manually pull in the path from there.

The zf-iconic attribute is needed to make the Iconic JS work.


Icon Colors

You can easily change the colors of the icons with our color classes like so:


Responsive Icons

By default, all icons are responsive! Not only do they size, but the IconicJS library swaps in appropriate icons for the current window size. You can use the size attribute within the directive to override the responsiveness. Otherwise, your icon will automatically size itself and render more/less detail depending on the size of the container you place it in. You can resize the window to see the icons below change in size and detail.

Icon Sizing

You can affect the size of the icons with our color classes like so:

Small     
Medium     
Large

Customize with Sass

You can use these Sass variables to customize the icons: