Icon

Use the <Icon> component to easily render <svg> icons. Outkit utilises Streamline as its base icon set and has provided a comprehensive pool of icons. However this list is not exhaustive.

Icons can be added from the Streamline library (available in Figma). New additions to the Streamline icon set can be logged in the Outkit Jira project here.

Sometimes it is necessary to add additional custom icons outside of the Streamline library.

Avoid passing onClick handlers to the Icon component. If you need a clickable icon, use IconButton instead.

Import

import { Icon } from '@outfitio/outkit';

Usage

Use an icon by passing the name prop. This name must match an icon key in theme.icons. By default, the icon inherits the fontSize and color of it's parent.

Icon library

Icon Fallbacks

If you pass an icon name that doesn't exist in theme.icons , you'll see the question-outline icon.

Adding custom icons

All icons are stored in the theme object under the icons key. You can extend this object to add your own icons.

To do this:

1. Export the icons as an svg.
2. Use a tool like SvgOmg to reduce the size and minify the markup.
3. Add the fill=currentColor attribute to the path or g so that the icon can be recolored using the color prop.
4. Add the icon to the theme object:

// Step 1: Each icon should be stored as an object of `path` and `viewBox`
const customIcons = {
icon1: {
path: <path fill="currentColor" d="..." />,
// If the icon's viewBox is `0 0 24 24`, you can ignore `viewBox`
viewBox: "0 0 40 40",
},
icon2: {
path: (
<g fill="currentColor">
  <path d="..." />
</g>
) } };

// Step 2: Add the custom icon to the theme
const customTheme = {
...theme,
icons: {
...theme.icons,
...customIcons,
}
}
// Step 3: Pass the new theme to the ThemeProvider
<ThemeProvider theme={customTheme}>{/* app goes here */}</ThemeProvider>
// Step 4: Now you can do this
<Icon name="icon1" color="success.200" />

Accessibility

• Pair text and icons for clarity
• Give icons a text equivalent if its purpose isn’t conveyed in another way

Props

Icon component composes Box so you can pass all Box props.