The icon tag renders a Font Awesome icon. Icons can be used inline with text to provide additional visual context.
| Attribute | Type | Description |
|---|---|---|
| name | string | REQUIRED. The name of a Font Awesome icon. Can be prefixed with a style: duotone, solid, regular or brands. Example: book, duotone book. |
| size | string | The size of the icon. Accepts any CSS value for size, like px or em. Defaults to 1em. |
| color | string | The color of the icon. Accepts any CSS color value. |
To display a simple book icon:
Here is a book icon: {% icon name="book" /%}Result:
Here is a book icon:
To display a larger, colored icon:
A bigger, blue book icon: {% icon name="book" size="2em" color="blue" /%}Result:
A bigger, blue book icon:
You can specify a style for the icon, like solid or brands.
A solid check-circle: {% icon name="solid check-circle" color="green" /%}
A GitHub brand icon: {% icon name="brands github" /%}Result:
A solid check-circle:
A GitHub brand icon:
Icons are commonly used in navigation elements to provide visual cues. For more information on using icons in specific components, refer to the following documentation: