Icons

Customize the icons used in components across your application.

Feedback

Demo

Success

Warning

Error

Info

Drop files here or

Usage

To customize the icons used in the Amplify UI components, wrap your application with the IconProvider component and pass in the icons you want to change. The icons prop should be an object mapping icon names to React components. For example:

import { IconsProvider, Rating } from '@aws-amplify/ui-react';
import { FiStar } from 'react-icons/fi';

export default function IconProviderExample() {
  return (
    <IconsProvider
      icons={{
        rating: {
          filled: <FiStar />,
          empty: <FiStar />,
        },
      }}
    >
      <Rating value={3.5} />
    </IconsProvider>
  );
}

The icons passed to the IconsProvider are ReactNodes that get rendered directly.

The IconProvider component uses React context to make the custom icon set available to child components. Any component inside the IconProvider will have access to the custom icons via an internal hook. You can nest IconProviders in different parts of your application, just like you would with other React contexts if you wanted to change icons in a certain part of your application.

Components with icons

The components and their icons that can be overridden are:

Here is the full list of icons you can customize with the IconProvider

const icons = {
  alert: {
    close: () => </>,
    info: () => </>,
    error: () => </>,
    warning: () => </>,
    success: () => </>,
  },
  checkbox: {
    indeterminate: () => </>,
    checked: () => </>,
  },
  accordion: {
    more: () => </>,
  },
  field: {
    clear: () => </>,
  },
  menu: {
    menu: () => </>,
  },
  pagination: {
    previous: () => </>,
    next: () => </>,
  },
  passwordField: {
    visibility: () => </>,
    visibilityOff: () => </>,
  },
  rating: {
    filled: () => </>,
    empty: () => </>,
  },
  searchField: {
    search: () => </>,
  },
  select: {
    expand: () => </>,
  },
  stepperField: {
    add: () => </>,
    remove: () => </>,
  },
  storageManager: {
    upload: () => </>,
    remove: () => </>,
    error: () => </>,
    success: () => </>,
    file: () => </>,
  }
}