About Our Icons

We've been really loving icon fonts of late. Fast, resolution independant, and with the help of a few good tools, they are really easy to implement and keep updated. We started out designing each and every icon that we needed for our apps and sites and then one day the amazing work done by Drifty Co. came on our radars and we've never looked back. It's a very versatile icon set that we've found just about covers everything that we need.

Implementation

We prefer to add semantic icon classes to html elements. If a stand alone element is needed (hiding the icons text) we use a helper class to hide the text yet make it available to screen readers for assistive technologies. Check out the following examples.

<a href="#">
<i class="icon ion-ios-cloud-download-outline"></i>
<span>Download</span>
</a>

<a href="#">
<i class="icon ion-ios-cloud-download-outline"></i>
<span class="hide-text">Download</span>
</a>

The icons.

Without further ado, here are our icons. Use them wisely.

Ionic has a nifty cheatsheet that you can use to quickly grab all you need to know to use a particular icon.