You are viewing documentation for a previous version of StorybookSwitch to latest version

IconGallery

Storybook's IconGallery Doc Block enables you easily document all icons associated with your project.

Working with MDX

Similar to other documentation-oriented Doc Blocks such as TypeSet, or ColorPalette, the IconGallery is also typically used with MDX. It allows you to provide additional customization via options. Below is a condensed example and table featuring all the available options.

Iconography.stories.mdx

import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/';
 
import { Icon as IconExample } from './Icon';
 
<Meta title="Iconography" />
 
# Iconography
 
<IconGallery>
  <IconItem name="mobile">
    <IconExample name="mobile" />
  </IconItem>
  <IconItem name="user">
    <IconExample name="user" />
  </IconItem>
  <IconItem name="browser">
    <IconExample name="browser" />
  </IconItem>
  <IconItem name="component">
    <IconExample name="component" />
  </IconItem>
  
  <IconItem name="calendar">
    <IconExample name="calendar" />
  </IconItem>
   <IconItem name="paintbrush">
    <IconExample name="paintbrush" />
  </IconItem>
   <IconItem name="add">
    <IconExample name="add" />
  </IconItem>
  <IconItem name="subtract">
    <IconExample name="subtract" />
  </IconItem>
   <IconItem name="document">
    <IconExample name="document" />
  </IconItem>
  <IconItem name="graphline">
    <IconExample name="graphline" />
  </IconItem>
 
</IconGallery>

Option	Description
`name`	Sets the name of the icon. `<IconItem name="add"/>`