# Ionicons

There’s a number of ways to import icons into your prototypes: you can create an icon font, store icons as images online, import an existing pack of icons, etc. Each option has it advantages, and your choice may depend on your ecosystem if a client or a product has its own set of icons that you are obliged to use. For most cases, however, using a publicly available icon pack is the quickest and the most convenient option for prototyping.

Ionicons is a free icon pack that comes with a Material and an iOS version of each icon. This article provides a simple usage guide, and the detailed instructions can be found on the Usage page of Ionicons’ website.

# Import

First, you need to import the icon set into your prototype. Create a new pen or open an existing one, and go to the CSS settings by clicking the gear icon in the header of the CSS section. Paste this link into a list of external stylesheets/pens below the search:

https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css

Save and close the settings. The icon set is now imported into your pen.

# Find

The Ionicons home page allows you to look around for a suitable icon by scrolling through the full list of icons, or by entering a search query. You can also switch between Material style and iOS style tabs to see different versions.

When you find an icon you want to use, click on it, and a toast bar should appear at the bottom. Copy the name of the icon from the left side of the bar:

# Use

Go to your prototype and create an empty span or a div. Add the class attribute to it with a value composed of three items:

<div class="ion-md-bicycle"></div>

• ion- indicates that this is an Ionicon icon.
• ios- or md- indicates which style you want to use: iOS or Material design.
• The name of the icon you copied from the Ionic website.

You should be able to see the icon in the Preview:

The Ionicons are imported as text, which means that you can stylize them with Tailwind’s text classes:

<div class="ion-md-bicycle text-blue-500 text-5xl"></div>

Notice that the icon is imported with just a class name name, and the container doesn’t have any content.

# Practice

# Tabs

1. Create a new pen.
2. Import Ionicons, as explained in the Import section above. Import Tailwind as explained in the previous article.
3. Create five tabs using the flex container. Distribute the child containers evenly using the Tailwind’s justify-around class.
4. Create five child containers with Ionicons. Don’t forget to change the size and the color using text classes:

<div class="ion-md-home text-2xl text-teal-500"></div>