Icon

Importing

import { Icon } from '@customerio/pluma-components/react';

Color

All Pluma Icons use currentColor for their fill, which means they inherit the current text color. It is recommended to use that default for coloring icons.

However, if the inherited text color isn't suitable, icons also accept a color argument. The accepted values are icon color tokens, which are:

For example:

Size

Icons accept a size argument, which can be one of the following:

v2 Sizing (Recommended)

Use sizeVersion="v2" for the new, improved size scale:

• sm (16px)
• md (20px, default)
• lg (24px)
• xl (32px)
• fill (100%)

v1 Sizing (Deprecated)

⚠️ Deprecated: v1 sizing is deprecated and will be removed in a future release. Please migrate to v2 sizing.

• xxs (12px)
• xs (14px)
• sm (16px)
• md (24px, default)
• lg (32px)
• xl (48px)
• fill (100%)

v2 Sizing Examples

v1 Sizing Examples (Deprecated)

While the "t-shirt" sizes set specific height/width styles, the fill size will make the icon stretch to fill the available space (by setting width and height to 100%). This can be useful in scenarios where a custom icon size is required, because custom sizes aren't accepted as size.

It is recommended to use one of the size arguments rather than custom sizes, to keep our icons sized consistently.

Custom Icons

If you need to use a custom icon that isn't part of the Pluma Icon set, you can use the Image component with the size prop. The Image component supports both v1 and v2 icon sizing systems:

The Image component supports all the same icon sizes as the Icon component, which ensures visual consistency between standard icons and custom images. Use v2 sizing (icon-v2-sm, icon-v2-md, icon-v2-lg, icon-v2-xl) for new implementations.

When using the Image component for custom icons, include the withBoundingBox prop to ensure proper spacing that matches the Icon component. This adds padding that correctly represents the icon's bounding box (icons are designed on a 24x24 grid with a 2px border), ensuring consistent visual alignment.

Aligning icons

Icon components are inline-block elements, and don't contain any additional styles for positioning or centering. If inline-block is causing problems, an icon's display property can be overridden with the display argument:

To vertically align icons with other elements, it is recommended to put them in a flex container, set to align-items: center.

Labels

When the Icon adds additional context to the page and should not function as a decorative graphic, add a label to explain its purpose or functionality. Adding a label is necessary for proper accessibility. To learn more about why, see the Decorative and non-decorative icons section under the Accessibility tab.