# Icon Icons can be used to represent concepts or provide context to options and/or actions within an experience. The `` element comes pre-configured with all the available [Auro Icons](https://auro.alaskaair.com/icons) . Simply add the `category` and `name` of the icon for quick and easy results. ## Use Cases The `` element should be used in situations where users may: * Benefit from additional context provided by an icon alongside text * Need to quickly identify actions or options represented by icons * Require visual indicators to enhance usability and navigation within an interface ## Install [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-icon/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-icon/actions/workflows/release.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-icon?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-icon) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-icon?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) ```shell $ npm i @aurodesignsystem/auro-icon ``` ### Define Dependency in Project Defining the dependency within each project that is using the `` component. ```js import "@aurodesignsystem/auro-icon"; ``` ### Use CDN In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported. ```html ``` ## Basic Example ```html ``` ## Custom Component Registration for Version Management There are two key parts to every Auro component: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML. When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you. However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts. You can do this by importing only the component class and using the `register(name)` method with a unique name: ```js // Import the class only import { AuroIcon } from '@aurodesignsystem/auro-icon/class'; // Register with a custom name if desired AuroIcon.register('custom-icon'); ``` This will create a new custom element `` that behaves exactly like ``, allowing both to coexist on the same page without interfering with each other.
See code ```html ```