--- title: Icons description: The Icon component simplifies icon integration with customizable styles. icons: true --- ## Usage Use the `href` attribute to reference the icon in the included sprite. The name of the icon is the id of the symbol in the sprite. ```html ``` For custom SVG icons, set the class `env-icon` on the SVG element. ```html ``` ## Sizes Icon size utility classes are named using the format: `env-icon--{size}` Valid values for _size_ - `xx-small` - `x-small` (default) - `small` - `medium` - `large` - `x-large` - `xx-large`

## Inactive An icon can be marked as inactive by adding modifier: `env-icon--inactive` which will lower opacity and add a hover effect. ```html

``` ## Attention For Envision icons and custom inline SVG images you may use modifier `env-icon--attention` on the icon or on part of an icon. The modifier will set the color to Status color Attention. ```html ```