Skip the navigation

Icon

The icon component allows you to easily display any icon from our curated icon library.

  • Figma:Ready
  • Web:Ready
  • iOS:Ready
  • Package:Core

Usage

import { Icon } from "@caesars-ui/core"

The icon component needs a name prop that resolves the icon. The full list of icons can be viewed on our iconography library.

Some name resolution details:

  • For flags, you can pass in the country name, and it should resolve the flag. (e.g. America)
  • If the icon name begins with icon_ you can omit icon_ if you'd like. (e.g. icon_ui_star can be ui_star)

Properties

* indicates required.

Accessibility

Principle

Status

Description

Percievable
Ready
The Icon component provides a visually distinguishable display for icons, utilizing appropriate color contrast and size to ensure icons are easily noticeable. It also includes alternative text or aria-labels for screen readers to announce the purpose or meaning of each icon.
Operable
Ready
The Icon component itself is not directly operable, but it supports integration with interactive elements such as Icon Buttons that users can interact with. Users can activate the associated functionality or action by interacting with the corresponding Icon Button.
Understandable
Ready
The purpose of the Icon component is clear through appropriate labeling or tooltips associated with each icon. Users can easily understand the functionality and meaning conveyed by the displayed icons. The "name" prop allows users to specify the desired icon, and the component offers a comprehensive list of icons in the iconography library for reference.
Robust
Ready
The Icon component is designed to be compatible with assistive technologies, ensuring that screen readers can properly identify the icons and their associated functionality. It also adheres to the provided name resolution details, allowing users to access icons by passing appropriate values to the "name" prop. The component functions consistently across different browsers and platforms.