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" />