Icons

The Catalyst UI Library uses the Bootstrap Icons library - a free, high-quality collection of over 2,000 open-source icons. Bootstrap Icons can be used as SVGs or through an icon font. Within this library, we implement them using the icon font approach.

You can find the complete list of available icons at icons.getbootstrap.com.

CataUiIcon Component

For convenience, we provide a CataUiIcon component that streamlines icon implementation with props for common customizations:

<CataUiIcon 
  icon="bi-heart-fill" 
  size="24px"
  color="red" />

This component accepts the following props:

  • icon: (required) The Bootstrap icon name with prefix (e.g., "bi-heart-fill")
  • size: The size of the icon (default: "16px")
  • color: The color of the icon (default: "var(--color-grey-900)")

Icon Variations

Many Bootstrap Icons come in multiple styles:

  • Regular: bi-heart
  • Fill: bi-heart-fill

Some also offer directional variants:

  • bi-arrow-up
  • bi-arrow-right
  • bi-arrow-down
  • bi-arrow-left
  • CataUiIcon - Dedicated component for Bootstrap Icons implementation