Skip to content
Last updated

Icon tag

The icon tag renders a Font Awesome icon. Icons can be used inline with text to provide additional visual context.

Attributes

AttributeTypeDescription

name

string

REQUIRED. A Font Awesome icon name. Realm has the following icon packs built in: Classic Regular, Classic Solid, Duotone Solid, and Classic Brands. The icons automatically adjust their colors when users change the color mode.

To add an icon from the Classic Regular pack, you can provide the icon name only or prefix the name with regular. To add an icon from other built-in packs, prefix the icon name with: solid (for Classic Solid), duotone (for Duotone Solid), or brands (for Classic Brands).

Examples: book, duotone book, brands github

Using other prefixes, including the fa- prefix, causes the icon to not render.

sizestringThe size of the icon. Accepts any CSS value for size, like px or em. Defaults to 1em.
colorstringThe color of the icon. Accepts any CSS color value.

Examples

Basic usage

To display a simple book icon:

Here is a book icon: {% icon name="book" /%}

Result:

Here is a book icon:

Sized and colored 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:

Different icon styles

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:

Usage with other components

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:

 
Next page