Icons

These are used as the symbolic representation, hence, these need to be simple to use and easy to recognise. With different variations of a same logo.

The icons used are from the Phosphor Icons family.

Phosphor is the go-to icon family because-

1. Open-sourced

2. Consistent iconography principles across all icons

3. Different variations of a same icon(light, regular, bold, fill and duo fill)

1. Regularly updates the repository with new and refined icons. More than 7500+ icons available to open-sourced community

2. Can be easily accessed through the Figma plugin

Prefer using outline icons over filled icons

Use outline icons over filled or bold icons. The reason using regular icons is the presence of subtle visual element used called characteristic cues.

Characteristic cues

Characteristic cue is something that makes each icon noticeable or distinguishable. When absent, it makes each icon hard to notice and hence eats away the practicality of using specific icons.

Phosphor icons had ingrained the characteristic cues in almost all of it’s icons.

From UX Movement

The problem of the absence of characteristic cues amplifies in bold or filled icons; making it harder to identify each icon.

Also from UX Movement

Although it also brings out the reasoning that the act of giving priority to one type of icons over the other is determined by the kind of icon family you are using.

Example of Characteristic cues in Phosphor icons