title: "Icon" slug: "/packages/icon" category: "image" componentNames:

• "Icon"

Icon

The icon component uses svg icons from the generated datastory-icons.svg spritesheet.

You can learn more about how to manage icons for Datastory in the brand guidelines.

import Icon, { Flag } from "@ds-kit/icon"

Simple example

The icon component takes name as a prop. The name has to coincide with the name the icon has in the spritesheet. Please cross check the icon names in Nucleo.

<Icon name="play" />

Color

You can modify the color of the icon via the color prop.

<Icon name="translate" color="cyan.500" />

Size

Most Datastory icons are build on the 24px grid, with the exception of country flags that use the 48px by default. The size of the icon can be modified via the size prop.

<Icon name="translate" size="3rem" />

Flags

Datastory uses the Nucleo country flags. For flags use the

<Flag name="usa" />