Introduction to icons

In the following section you will learn how to find icons, add them to your project, and format their size and style. You’ll also learn how to group them on the page, and organize them quickly and effectively by using the Outline Panel.

Icons play an essential role in helping users navigate an interface. If you’re new to design, the easiest way to grasp their unique role and purpose is to imagine the signage at an international airport.

The airport’s iconography has to be universal, inclusive – and independent of language. Travellers need to be able to tell, at a glance, where they should go for baggage, information, food, bathrooms, customs, arrivals, departures, taxis, buses, and so on.

As a result, the icons not only have to be clear and unambiguous, but they also have to be part of the same ‘family’ and style – so you know, instantly, that you’re dealing with the airport's official signage. They need to have a graphical language that’s all their own, and that’s why they’re normally applied in style-groups.

Airport iconography allows tens of thousands of users to simultaneously navigate the complicated architecture of airports, minimizing chaos and confusion, and delivering them just in time to their flights.

Similarly, the icons within your UI allow millions of users to navigate seamlessly, providing directions that are simple, quick and clear.

Because of the fundamental importance and utility of icons, they have their own, dedicated tab.

To locate the Icons Library, go to the Left Sidebar and click on the Icons Tab. The tab will turn blue and open the Icons Panel.


Our Icons Library contains several Icons Kits: Material Design, Material Design +, Font Awesome, Font Awesome v4, Hawcons, Hawcons (Filled) and Entypo+.

Icons can be adjusted and styled like all other objects – but working with icons is different in two key ways:

  • How you Search for icons
  • How you can take advantage of their unique Replace feature

We will cover both these topics within this section’s subsequent articles.

  • If you’re looking to combine and group your objects (icons), in order to create Templates, click here.
  • If you want to learn how to add Interactions to your icons, click here.