Icon
Display a Font Awesome SVG
Introduction
Icon component for displaying Font Awesome SVG icons. You can go to the Font Awesome website to find icons and their corresponding names.
Variants
Font Awesome offers a range of different icon styles. In Bifrost, we use the following styles:
| Variant | Example | Description |
|---|---|---|
| Regular | Outlined icon | |
| Solid | Filled icon | |
| Brand | Brand icons |
Usage
- Use icons that clearly represent the action or concept they are associated with (see table below).
- Avoid using icons that may be confusing or ambiguous.
- Ensure icons are visually consistent in style throughout the application.
- When using icons next to a related text or label, make the icon and the text the same size.
Standarized icons
Some icons are used more frequently than others. To ensure consistency across applications, we have standardized a set of commonly used icons.
The list below shows the standardized icons, their names, and their intended usage. The list is not exhaustive, and you can use other icons as needed, but we recommend using these standardized icons whenever applicable to maintain a consistent user experience.
| Icon | Name | Usage |
|---|---|---|
| house | Home page link icon in navigation sidebar | |
| search | Search inputs and buttons that open a search input | |
| arrow-down-to-line | Download button | |
| cog | Settings or preferences | |
| copy | Copy button | |
| pencil | Edit button | |
| trash | Delete button | |
| ellipsis | Action button with multiple options in a dropdown |
Spinner
We have a spinner component built into the Icon component for indicating loading states (saving, processing, sending etc). It can be used in buttons, modals, inputs and more. The size can be adjusted as needed.