Overriding icons globally

With Base Web, you can use your custom icon set. To do that, you have to provide your icons in the theme.

You can use any React components as Icon replacements, as long as they accept the following properties:

  • size, to set their width and height,
  • color, to set their colors,
  • title, to set the title of the icon for accessibility purposes.

You can find more about the Icon API here and also refer to this list of available icons.

The example below overrides the ChevronLeft icon with the ArrowLeft icon, making the pagination slightly different.

All the icons that can be found on the Icon component page can be overridden using this technique.

Pagination icon overrides

of 10

To learn more about creating and using themes, check out the the Custom themes documentation page.