Spirit UI

Icon

Icon is used to display icons.

import { Icon } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return <Icon name="SparklesIcon" size={24} />;
}

Variants

The variant prop can be used to decided if the icon should be displayed filled or outlined.

import { Box, Icon } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return (
    <Box display="flex" gap="x2">
      <Icon name="SparklesIcon" variant="outline" />
      <Icon name="SparklesIcon" variant="solid" />
    </Box>
  );
}

Sizes

The size prop can be used to change the size of the icon to better flow with it's placement in the UI.

import { Box, Icon } from "@spirit-ui/design-system/components";
 
export default function Component() {
  return (
    <Box display="flex" gap="x2">
      <Icon name="SparklesIcon" size={16} />
      <Icon name="SparklesIcon" size={20} />
      <Icon name="SparklesIcon" size={24} />
    </Box>
  );
}

Props

PropDefaultType