Definition
Font Awesome serves as the foundation for Compound’s iconography and can be utilised as an icon font or one of the associated libraries.
Usage
Although Font Awesome has thousands of icons, Compound’s suite is a curated set and can be used in designs.
Font Awesome provides a range of suites; Compound uses a select few.
Icons should come from:
- Classic > Regular suite
- Classic > Solid for some instances of selected states
- Be contained in a 16px, 24px or 64px bounding area
- Use the appropriate design tokens
Bounding Box
Font Awesome icons vary in dimensions; in most cases, these do not align with the soft grid sizes.
To maintain consistency, centre each icon in a bounding box that equates to:
- 16px square
- 24px square
- 64px square
Icon Resizing
Due to the large Font Awesome vectors, Compound uses a smaller icon size within each bounding box.
|
Bounding Box Size |
Icon Size |
|---|---|
|
16px |
12px |
|
24px |
20px |
|
64px |
48px |
New Icon Proposals
Propose new icons in the same manner as other component proposals.
Figma assets Information
Each icon has a note in the Figma developer panel with the Font Awesome code reference. When viewing the icon in Figma, a link goes to the specific Font Awesome page for more details.
