⏯️

Iconography

Introduction

Iconography is another key element of your design. It is a visual language used to represent features, functionality, or content.

Icons are meant to be simple, vi£sual elements that are recognized and understood immediately.

In many cases, there are already standard icons for the devices and OS your app is targeting. So you don't need to redesign everything from scratch.

image

When to use custom iconography

In addition to OS or device-specific icons, your app may also need its own set of icons to represent app-specific functionality that the standard sets cannot accommodate without creating ambiguity for the user (e.g. recipe search, movie bookmark, image download).

image

If you do need to create and use custom icons for some of your app features, you will want to ensure that all of the custom icons have these two features in common with your other, standard icons:

  • shared thematic style
  • consistent design elements

When creating custom icons Use the text test to determine if your icon is ambiguous. If your icon needs a title or description in order to convey it’s meaning, consider a different icon or using no icon at all.

I recommend you to start with existing libraries

A lot of free/premium icon libraries can be found on the web.

  • Start by picking one that you like (available in premium pack)
  • Paste it in your project if you're on a free account
  • or use it as a library if you're already on a paid plan with Figma (like in the video below)

Why is it so important?

What makes iconography fascinating is that once users get used to these associations, they become automatic and effortless in a way that glancing over groups of letters can never be.

Next up

💬
❖ Components