import { Meta } from '@storybook/addon-docs/blocks'; import StreamlineSettings from './assets/streamline-settings.png';

Icons

<p className='excerpt'>We use the [Streamline icon library](https://www.streamlinehq.com/) in Ghost Admin. Here are some iconography best practices.</p>

Overview

The icons are part of the AdminX design system so they can be reusable in any Ghost Admin app. Use the Icon component to display available icons in standard icon sizes.

Adding new icons

There are some rules we have to follow in order to maintain consistent iconography:

<div className="streamline"> <div> - All icons must be SVG format. - Icons must be exported using **strokes** as lines and **not** filled areas. The stroke width must be **1.5px**. This allows more flexibility but still maintains consistency (and less filesize). - All icon should be exported in a 24x24 pixel container. - All icons should use `currentColor` as their colors for strokes. This lets us color the icon easily in CSS. - Icons must be exported with transparent background.

#### Exporting using the Streamline app

For the best result we recommend using the Streamline app to copy the SVG code of new icons with the following settings:

- Format: SVG
- Size: 24px
- Stroke: 1.5px
- Responsive size: OFF
- Outline stroke: **OFF**
- Background: transparent
- Asset currentcolor: **ON**
- Background currentcolor: OFF
</div>

</div> </div>