# Icon tag

The `icon` tag renders a [Font Awesome](https://fontawesome.com/icons) icon.
Icons can be used inline with text to provide additional visual context.

## Attributes

| Attribute | Type | Description |
|  --- | --- | --- |
| name | string | **REQUIRED.** The name of a [Font Awesome](https://fontawesome.com/icons) icon. Can be prefixed with a style: `duotone`, `solid`, `regular` or `brands`.
Example: `book`, `duotone book`, `brands github`, `./images/config-icon.svg`. |
| 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. |


## Examples

### Basic usage

To display a simple book icon:


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

**Result:**

Here is a book icon: 

### Sized and colored icon

To display a larger, colored icon:


```markdoc
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`.


```markdoc
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:

- [Navbar configuration](/docs/realm/config/navbar)
- [Sidebar configuration](/docs/realm/navigation/sidebars)
- [Footer configuration](/docs/realm/config/footer)