static-cms/website/content/docs/custom-icons.mdx

---
group: Customization
title: Adding Custom Icons
weight: 100
---

The Static CMS exposes a `window.CMS` global object that you can use to register custom icons via `registerIcon`. The same object is also the default export if you import Static CMS as an npm module.

Custom icons can be used with [Collections](/docs/collection-overview) or [Custom Links & Pages](/docs/additional-links)

## Params

| Param | Type                                                                           | Description                                        |
| ----- | ------------------------------------------------------------------------------ | -------------------------------------------------- |
| name  | string                                                                         | A unique name for the icon                         |
| name  | [React Function Component](https://reactjs.org/docs/components-and-props.html) | A React functional component that renders the icon |

## Example

This example uses Font Awesome to supply the icon.

```js
import { faHouse } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

cmsApp.registerIcon('house', <FontAwesomeIcon icon={faHouse} size="lg" />);
```

## Usage

### Collection

<CodeTabs>
```yaml
collections:
  - name: homepage
    icon: house
```

```js
collections: [
  {
    name: 'homepage',
    icon: 'house'
  },
],
```

</CodeTabs>

### Additional Links

See [Additional Links](/docs/additional-links#examples) for details.