Articles in this section

Icons

Also in this section

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.