Iconography
Icons are a vital part of improving the user experience in a project. It lets users determine the function, intent, and meaning of the action/information by looking at one glyph.
Guidelines
We've divided allowed icons by their purpose. There are only a few icon libraries you're allowed to use.
| Purpose | Icon Libraries |
|---|---|
| General, Component Use | Font Awesome Icons |
| External Brand/Logo | SimpleIcons |
| Dev Protocol Brand | Refer to Dev Protocol's branding section |
Sizing
Generally, icon sizes only revolve around 22px to 28px depending on the component size.
| Component Size | Icon Size |
|---|---|
| Small | 22px |
| Medium | 25px |
| Large | 28px |
However, this rule can be broken whenever used next to a standalone typography element (like a Supertitle). In these cases, the icon sizes are the same as the typography size.
Spacing
Whenever the icon is placed next to a text, the space between the two is 4px minimum.