> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/writer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/writer/7.0.0/api-reference/uicomponents/uiicon.md).

# UIIcon

Use icons from the Writer/Dashboard styleguide

**Since**: 7.0.0

| Name      | Type     | Default | Description                                   |
| --------- | -------- | ------- | --------------------------------------------- |
| name      | `string` |         | **Required** - Name of the icon               |
| size      | `number` |         | Combined width and height in px.              |
| width     | `number` | `size`  | Width of icon in px.                          |
| height    | `number` | `size`  | Height of icon in px.                         |
| color     | `string` |         | Color of icon. HEX, RGB, RGBA or CSS-variable |
| rotate    | `number` |         | Degrees you want to rotate icon               |
| className | `string` |         | Extra classes added to icon wrapper           |

## Example

```javascript
import {UIIcon} from 'writer'

render($$) {
    const el = $$('div')

    return el.append(
        $$(UIIcon, {
            name: 'space-rocket-flying-regular',
            size: 20,
            color: '#000"
        })
    )
}
```