Quick Start

1: Download & unzip the icons. Move the fonts into the project/resources/fonts directory.

2: Move the CSS file into the project/resources/css directory.

3: Inside index.html link the icon library to your project.

4: Find the icons you want to use:

5: Within your HTML markup, call the icons like this:

(Note: this demo includes icons from all 4 open source libraries. But this is not required. You may install any or all of the icon fonts listed below.)

<i class="ion-ios-contact"></i>
<i class="glyphicon glyphicon-download"></i>
<i class="glyphicon glyphicon-upload"></i>
<i class="md-scooter"></i>
<i class="fa fa-cog"></i>
<i class="fa fa-cog fa-spin"></i>

Made for You

Browse Categories / Search Keywords

We've added keywords and categories to the database - which speeds the process of finding the right icons.

Preview the Family

One of the main drawbacks of most icon libraries is that you have to view your favorites in isolation. Maraschino allows you to build a cohesive icon family.

Stay Organized

By using the "print" feature you can save your icon list (w/classes!) as a PDF to your project folder. Alternatively, print the list and check off items as you go.

Maintain Your Project

Return to your project right where you left off. Now that you've identified and recorded all the icons - it's easier to share the work as needed.


Font Awesome 4.5.0






Ionic 2.0.1



BB10 2.0