Icon

For the icons displayed by the components internally, we use Feather icons and provide them as part of our Figma library. You can still use Reshaped together with any other icon set, such as the following ones:

To support tree-shaking and allow you to use any icon set, Icon has an svg property to pass a React component to it. You can use it with any icon set available on the web if it returns icons as React components or if your bundle transforms SVG imports into React nodes.

<Icon svg={ActivityIcon} size={5} />

In most situations, you can use the Icon without manually defining its color. It will inherit the text color from its parent elements, making it quite dynamic.

<div style={{ color: "tomato" }}>
  <Icon svg={ActivityIcon} size={5} />
</div>

Color for the SVG should be defined at the SVG level by using the currentColor value for its fill or stroke CSS properties. Example of an SVG component:

const ActivityIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    strokeWidth="2"
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <polygon
      points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"
      fill="currentColor"
    />
  </svg>
);

In some cases, you might not want to introduce an additional wrapper just to set the color. In these situations, you can pass the color property directly to the icon. This allows you to choose one of the foreground colors provided by the design tokens.

<View gap={3} direction="row">
  <Icon svg={ActivityIcon} color="neutral" size={5} />
  <Icon svg={ActivityIcon} color="neutral-faded" size={5} />
  <Icon svg={ActivityIcon} color="primary" size={5} />
  <Icon svg={ActivityIcon} color="positive" size={5} />
  <Icon svg={ActivityIcon} color="warning" size={5} />
  <Icon svg={ActivityIcon} color="critical" size={5} />
  <Icon svg={ActivityIcon} color="disabled" size={5} />
</View>

By default, Icon uses the font size of its parent element to define its width and height. However, you can define any size for the icon by passing a unit token multiplier. For example, in the default theme, passing size={3} will resolve to 12px.

<View gap={3} direction="row">
  <Icon svg={ActivityIcon} size={3} />
  <Icon svg={ActivityIcon} size={12} />
</View>

You can also use literal values for the Icon size if you need more flexibility. For example, you can set its size to 100% to inherit the size of its parent.

<View width="50px" height="50px">
  <Icon size="100%" svg={ActivityIcon} />
</View>

By default, we provide a squared bounding box for all icons. This ensures that whenever you render multiple icons in a list, your content stays visually aligned. However, sometimes you might want to avoid that extra horizontal space on either side of the icon. For instance, we use this for Button or Link components in Reshaped. You can use the autoWidth property to keep only the vertical bounding box and remove this extra space.

<Icon svg={IconMic} autoWidth size={6} />

Icon supports responsive syntax for the size property. Use object syntax to control its value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<Icon size={{ s: 4, l: 6 }} />

• Icons are used for decoration and are not focusable or clickable. If you need to perform an action on click, focus, etc., wrap it with a component or HTML element that renders an <a> or <button> tag. Most of the time, you will want to use it with the Button component.

<Button icon={ActivityIcon} variant="ghost" />