Icon

Icon is used to display Scalable Vector Graphics (SVG).

Demo

Note

Icons should be thought of as plain text; they inherit the size and color of their context or can be set directly. Icons themselves do not have any state or handlers, those should be at a higher level like a button. Amplify UI does not include any icons other than the ones Amplify UI components like Alert and Accordion use.

Usage

Import the Icon component and styles.

import { Icon } from '@aws-amplify/ui-react';

// This is a favorite icon
export const DefaultIconExample = () => (
  <Icon
    ariaLabel="Favorite"
    viewBox={{ width: 24, height: 24 }}
    pathData="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0
    3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
  />
);

Built-in iconset

Deprecated

The built-in icons were removed in version 3.0. You can use the react-icons package or other React icon libraries in its place.

// Removed
import {ICON_NAME} from '@aws-amplify/ui-react';

// Suggested
import {ICON_NAME} from 'react-icons/md';`

To customize the default icons used in components like Alert and Rating, you can use the IconProvider.

Custom icon

Using path data

To create a custom icon using a path data, provide the d attribute in svg to pathData prop.

import { Icon } from '@aws-amplify/ui-react';

export const CustomIconExample = () => {
  return (
    // This is a thumbs up icon
    <Icon
      ariaLabel="Thumbs up"
      pathData="M9 21h9c.83 0 1.54-.5
1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17
1 7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h4v12H1z"
    />
  );
};

You can use the viewBox prop to change the SVG viewBox. Both width and height default to 24.

import { Icon } from '@aws-amplify/ui-react';

export const ViewboxExample = () => (
  <Icon
    ariaLabel="Camera"
    viewBox={{ width: 30, height: 30 }}
    pathData="M10 8v8l5-4-5-4zm9-5H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"
  />
);

Using SVG

You can also pass SVG elements as children to the Icon component if you have more than 1 path or want to provide other SVG attributes like stroke

import { Icon } from '@aws-amplify/ui-react';

export const CustomIconWithSvgExample = () => {
  return (
    // This is an align bottom icon
    <Icon ariaLabel="Align bottom">
      <path d="M13 10H17V16H13V10Z" fill="currentColor" opacity="0.5" />
      <path d="M11 4H7V16H11V4Z" fill="currentColor" />
      <path d="M18 18H6V20H18V18Z" fill="currentColor" />
    </Icon>
  );
};

You can also optionally use a paths array of path-like objects that will be mapped to <path> elements.

import { Icon } from '@aws-amplify/ui-react';

export const CustomIconWithPathsExample = () => {
  return (
    <Icon
      ariaLabel="tag"
      viewBox={{ width: 23, height: 15 }}
      paths={[
        {
          d: 'M1 0.5C0.723858 0.5 0.5 0.723858 0.5 1V14C0.5 14.2761 0.723858 14.5 1 14.5H14C14.1148 14.5 14.2262 14.4605 14.3153 14.3881L22.3153 7.88806C22.4322 7.79311 22.5 7.65056 22.5 7.5C22.5 7.34944 22.4322 7.20689 22.3153 7.11194L14.3153 0.611943C14.2262 0.539529 14.1148 0.5 14 0.5H1Z',
          strokeLinejoin: 'bevel',
          strokeLinecap: 'round',
          strokeDasharray: '4 4',
          fill: 'transparent',
          stroke: 'currentColor',
        },
      ]}
    />
  );
};

Using a library

To use an icon library like React Icons, import the desired icon and pass it to the as prop.

import { Icon } from '@aws-amplify/ui-react';
import { DiJsBadge } from 'react-icons/di';

export const CustomIconWithLibExample = () => {
  return <Icon ariaLabel="Javascript" as={DiJsBadge} />;
};

Here are some good open source icon libraries:

Styling

Target classes

Class	Description
`amplify-icon`	Top level element that wraps the Icon primitive

--amplify-components-icon-height
--amplify-components-icon-line-height

Sizes

Icon size matches the font-size of the container. Adjust the font-size to set a specific height.

Inherited size from button sizes

Save

import { Button, Icon, Text } from '@aws-amplify/ui-react';

const SaveIcon = () => (
  <Icon
    ariaLabel=""
    pathData="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"
  />
);

export const IconSizesExample = () => {
  return (
    <>
      {/* Inherited from button sizes */}
      <Button gap="0.1rem" size="small">
        <SaveIcon /> {'Save'}
      </Button>
      <Button gap="0.2rem">
        <SaveIcon /> {'Save'}
      </Button>
      <Button gap="0.2rem" size="large">
        <SaveIcon /> {'Save'}
      </Button>
      <Text as="span" fontSize="50px">
        <SaveIcon />
        Save
      </Text>
    </>
  );
};

Color

Use the color prop to change the Icon color. The fill of the path inside the SVG is set to currentColor(inherits color from current font color).

import { Icon, useTheme } from '@aws-amplify/ui-react';

export const IconColorExample = () => {
  const { tokens } = useTheme();
  return (
    <>
      <Icon
        ariaLabel="Flag"
        pathData="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"
        color={tokens.colors.pink[80]}
      />
      <Icon
        ariaLabel="Flag"
        pathData="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"
        color="rebeccapurple"
      />
    </>
  );
};

Accessibility

The Icon component does not require a label by default because there are a number of ways to use an Icon in an accessible way:

You can set an aria-label attribute on the Icon
You can use a <title></title> element when passing SVG elements as the child of the Icon
You can use the Icon decoratively, when a label would be redundant.

Announcement

import { Icon, Flex, Text } from '@aws-amplify/ui-react';
import { MdAnnouncement } from 'react-icons/md';

export const AccessibilityIconExample = () => (
  <Flex direction="column" alignItems="flex-start">
    {/* Icon labeled via aria-label */}
    <Icon
      ariaLabel="Close"
      pathData="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z"
    />

    {/* Icon labeled via SVG <title></title> element */}
    <Icon>
      <title>Document</title>
      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"></path>
    </Icon>

    {/* 
      Decorative Icon, hidden from the accessibility tree 
      because it is accompanied by descriptive text. 
    */}
    <Flex gap="xxxs" alignItems="center">
      <Icon as={MdAnnouncement} aria-hidden="true" /> <Text>Announcement</Text>
    </Flex>
  </Flex>
);