In this article:
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 airports 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 numerous Icons Kits: Material Design, Font Awesome, Bootstrap, Feather, Hawcons, Amazon AWS, Azure Services, Kubernetes, Google Cloud, Cisco, RPG Awesome, and Emoji. And, many of these sets come with a variety of themes; For instance, our Material Design pack now includes Filled, Outlined, Rounded, Sharp, Two-Tone, and Community variations.
Icons can be adjusted and styled like all other object - but working with icons is different in two key ways:
We will cover both these topics within this section’s subsequent articles.