IconCompact

View source on GitHub
See recent changes on GitHub

Icons are the symbolic representation of an action or information, providing visual context and improving usability. These icons have a 16x16 viewboxes and are used in places where space is limited. Refer to your designer for guidance on when to use Compact Icons.

See the Iconography and SVG guidelines to explore the full icon library.

Props

Component props
Name
Type
Default
accessibilityLabel
Required
string
-

Label for screen readers to announce Icon. This populates the aria-label attribute. If the label is hidden, use an empty string for the label (accessibilityLabel="") to set aria-hidden.

See the Accessibility guidelines for details on proper usage.

color
"default"
| "disabled"
| "subtle"
| "success"
| "error"
| "warning"
| "info"
| "recommendation"
| "inverse"
| "shopping"
| "brandPrimary"
| "light"
| "dark"
"subtle"

The colors available to apply to Icon.

See the color variant to learn more.

dangerouslySetSvgPath
{
  __path: string;
}
-

Defines a new icon different from the built-in Gestalt icons.

See the custom icon variant to learn more.

dataTestId
string
-

Available for testing purposes, if needed. Consider better queries before using this prop.

icon
"compact-add" | "compact-arrow-up-right" | "compact-cancel" | "compact-check" | "compact-check-circle-fill" | "compact-chevron-down" | "compact-chevron-left" | "compact-chevron-right" | "compact-chevron-up" | "compact-dash" | "compact-info-circle-fill" | "compact-lock" | "compact-workflow-status-canceled" | "compact-workflow-status-halted" | "compact-workflow-status-in-progress" | "compact-workflow-status-problem" | "compact-workflow-status-unstarted" | "compact-workflow-status-warning"
-

SVG icon from the Gestalt icon library to use within Icon.

See the icon library to explore available options.

inline
boolean
false

Properly positions Icon relative to an inline element, such as Text using the inline property.

size
number | string
16

Use a number for pixel sizes or a string for percentage based sizes.

See the size variant to learn more.

Accessibility

IconCompacts are a great way to help users who have difficulties with reading, focus attention, and low vision impairments.

ARIA attributes

If the icon appears without text, the IconCompact requires accessibilityLabel, a text description for screen readers to announce and communicate the represented the icon, as shown in the first example.

Avoid using the generic words like "image" or "icon"; instead, use verbs that describe the meaning of the icon.

If an icon has a visible label that describes what the icon represents, accessibilityLabel can be an empty string.

Legibility

Ensure that icons use a contrast ratio of 4.5:1 between icon color and background color.

Localization

Be sure to localize all text strings. Note that localization can lengthen text by 20 to 30 percent.

Variants

Colors

IconCompacts can be created using the following color options. brandPrimary should only be used to represent the Pinterest logo, as it is not accessible. See the design tokens for more info.

color="default"
color="disabled"
color="subtle"
color="success"
color="error"
color="warning"
color="info"
color="recommendation"
color="inverse"
color="shopping"
color="brandPrimary"
color="light"
color="dark"

Custom icon

IconCompact accepts both Gestalt icons and custom icons, as shown in the second example. For custom icons, follow the iconography and SVG guidelines.

Built-in icon
import { Flex, IconCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <IconCompact accessibilityLabel="Add new Pins" icon="compact-add" />
    </Flex>
  );
}
Custom SVG icon
import { Flex, IconCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <IconCompact
        accessibilityLabel="Add new Pins"
        dangerouslySetSvgPath={{
          __path:
            'M9.41 1.41a1.41 1.41 0 0 0-2.82 0V6.6H1.4a1.41 1.41 0 1 0 0 2.82h5.2v5.18a1.41 1.41 0 1 0 2.82 0V9.4h5.18a1.41 1.41 0 1 0 0-2.82H9.4z',
        }}
      />
    </Flex>
  );
}

Writing

Do

Use a descriptive label to describe the IconCompact

  • Be succinct. Exclude unnecessary words.
  • Be informative and accurate
  • Write in the active voice
  • Avoid technical jargon
Don't
  • Use the words "image" or "icon" in the description label; instead, use words that indicate the purpose of the icon.

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Component does not respond to changing viewport sizes in web and mobile web.

IconButton
Use IconButton when only an icon is needed to represent an action instead of text.

Button
Use Button to allow users to take an action.

Edit page on GitHub