Pictogram
=========

*   GitHub: [BonnierNews/dn-design-system/web/src/components/Pictogram](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pictogram)
*   Storybook: [Pictogram](https://designsystem.dn.se/?path=/docs/article-Pictogram--docs)

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/pictogram/pictogram.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| variant | "brand", "business", "game" | "brand" |
| iconName\* | "search", "link", "x", "wifi\_off", "volume\_up", "volume\_off", "visibility\_off", "visibility" | \- |
| size | "small", "large" | "small" |
| classNames | string | \- |
| attributes | object | \- |
| forcePx | boolean | \- |

```jsx
<Pictogram
  iconName="celebration"
  size="large"
  variant="brand"
/>
```