# EuiIconSvgComponent

**Type:** component



`eui-icon-svg` component for displaying scalable vector graphics from icon sets.
Supports multiple icon libraries, customizable sizing, colors, and transformations.
Icons can be loaded from configured asset paths or specified URLs.
Provides accessibility features including ARIA labels and role attributes.
Commonly used throughout the application for consistent iconography in buttons, menus, and UI elements.

### Basic icon
```html
<eui-icon-svg icon="check" size="m"></eui-icon-svg>
```

### Icon with color
```html
<eui-icon-svg
  icon="warning"
  fillColor="warning"
  size="l"
  ariaLabel="Warning indicator">
</eui-icon-svg>
```

### Custom icon from URL
```html
<eui-icon-svg
  [iconUrl]="'/assets/custom-icon.svg'"
  size="xl">
</eui-icon-svg>
```

### Accessibility
- Set `ariaHidden="false"` and provide `ariaLabel` for meaningful icons
- Decorative icons should keep `ariaHidden="true"` (default)
- Use `focusable="true"` only for interactive icon elements

### Notes
- Icon sets are configured via EUI_CONFIG_TOKEN
- Use colon notation for specific sets: `icon="check:material"`
- Size tokens: 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl
- Apply `transform` for rotations (e.g., "rotate-90", "flip-horizontal")


**Selector:** `eui-icon-svg, span[euiIconSvg], i[euiIconSvg]`

## Inputs
- **ariaHidden**: `boolean` - Hides the icon from assistive technologies when purely decorative. Set to false when icon conveys meaningful information requiring announcement.
- **ariaLabel**: `string` - Accessible label for screen readers describing the icon's purpose. Provides semantic meaning when icon conveys information beyond decoration.
- **euiEnd**: `boolean` - Positions the icon at the end (right in LTR, left in RTL) of its container. Commonly used for trailing icons in buttons or list items.
- **euiStart**: `boolean` - Positions the icon at the start (left in LTR, right in RTL) of its container. Commonly used for leading icons in buttons or list items.
- **fillColor**: `string` - Fill color for the SVG icon using EUI color token names. Applies CSS custom property in format '--eui-c-{fillColor}'. Affects both fill and color properties for comprehensive icon styling.
- **focusable**: `boolean` - Makes the icon focusable via keyboard navigation. Enables tab-stop behavior for interactive icon elements.
- **icon**: `string` - Name of the icon to display, optionally including the icon set using 'iconName:setName' format. When format includes colon separator, automatically splits into icon and set properties. Required for icon display unless iconUrl is provided.
- **iconUrl**: `string` - Direct URL to an SVG icon file, bypassing the icon set resolution. Useful for loading custom or external icons not in configured icon sets.
- **isInputIcon**: `boolean` - Applies styling specific to icons used within input fields. Adjusts positioning and spacing for input-embedded icons.
- **isLoading**: `boolean` - Displays a loading animation or state on the icon. Applies 'eui-icon-svg--loading' class for loading-specific styling.
- **set**: `string` - Icon set library to load the icon from. Determines the source directory for icon SVG files.
- **size**: `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | string` - Size variant for the icon using predefined scale or custom value. Predefined sizes: '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl'. Custom string values can be provided for non-standard sizing.
- **style**: `string` - Custom inline CSS styles applied directly to the icon element. Allows for additional styling beyond component properties.
- **transform**: `string` - CSS transform class modifier applied to the icon. Common values include rotation or flip transformations. Applied as 'eui-icon-svg--{transform}' class.