Definition
Font Awesome 6 is the basis for Compound’s iconography and can be used as an icon font or one of the associated libraries.
Usage
Although Font Awesome has thousands of fonts, our suite is a curated set and can be used in designs.
Icons should come from:
- Classic Family of fonts, Solid for some instances
- Be contained in a 16px, 24px or 64px bounding area
- Use the appropriate token colours
Bounding Box
Font Awesome icons vary in dimensions, in most cases these do not equate to sizes that work with our soft grid.
To maintain consistency each icon should be centered in a bounding box that equates to:
- 16px square
- 24px square
- 64px square
New Icon Proposals
New icons should be proposed in the Compound channel, in the same manner as other component proposals.
Font Information
Each icon has a note in the developer tools of the font-awesome code reference to use. If viewing the icon on Figma there is a link to go to the specific Font Awesome page for more details.
Installation
To install the compound kit via CDN
<script src="https://kit.fontawesome.com/e6dbc327bd.js" crossorigin="anonymous"></script>
Via NPM
- Contact a member of the Compound team for authentication information
- Install the NPM package
npm install --save '@awesome.me/kit-e6dbc327bd@latest'
Icons
16px Icons
24px Icon s
Social
