---
url: /docs/components/icons/frameworks/elements.md
---
# Icons - Elements

Warp’s icons are crafted to deliver consistency, clarity, and scalability across our multi-brand product ecosystem.

## Accessibility

Icons ship with a localized descriptive `<title>`.

Note that the description is about the icon itself, not its semantic meaning in every given context. If you for example make an icon button, make sure to include an `aria-label` on your button that describes its action.

## Usage

See the [Icons overview](https://warp-ds.github.io/docs/components/icons/overview) for a list of available icons. Icon names are case sensitive.

```html
<w-icon name="Rocket"></w-icon>
```

## Examples

### Small

```html
<w-icon name="Rocket" size="small"></w-icon>
```

### Medium

This is the default size.

```html
<w-icon name="Rocket" size="medium"></w-icon>
```

### Large

```html
<w-icon name="Rocket" size="large"></w-icon>
```

### Custom size

You can set a pixel size as well if none of the presets fit your needs.

```html
<w-icon name="Rocket" size="13.37px"></w-icon>
```

## `<w-icon>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| locale | `string` | `-` | Locale used for `<title>` text. |
| name | `string` | `-` | Icon filename (without .svg) |
| size | [`"small" \| "medium" \| "large" \| PixelValue \| undefined`](#small-medium-large-pixelvalue-undefined) | `"medium"` | Size: small, medium, large or pixel value (e.g. "32px"). |

### Property Details

#### locale

Locale used for `<title>` text.

Reads the `lang` attribute from `<html>`, falls back to 'en'.

* Type: `string`
* Default: `-`

#### name

Icon filename (without .svg)

* Type: `string`
* Default: `-`

#### size

Size: small, medium, large or pixel value (e.g. "32px").

* Type: [`"small" | "medium" | "large" | PixelValue | undefined`](#small-medium-large-pixelvalue-undefined)
* Default: `"medium"`

### Types

#### "small" | "medium" | "large" | PixelValue | undefined

`'small' | 'medium' | 'large' | PixelValue | 'small' | 'medium' | 'large' | undefined`

#### SVGElement | null

`null | SVGElement`

#### symbol | null

`null | symbol`

## Migrating from the `@warp-ds/icons` package

The `@warp-ds/icons` package is replaced by the `<w-icon>` component documented here. To migrate, replace imports from `@warp-ds/icons` with the `<w-icon>` component.

For example, say you import `IconBag16` from `@warp-ds/icons/react`. To use `<w-icon>` instead, remove the import of `@warp-ds/icons/react` and add this markup to your React code instead:

```diff
- import { IconBag16 } from '@warp-ds/icons/react';
+ import "@warp-ds/elements"; // optional, @warp-ds/elements components are globally available on Aurora

export const MyComponent = () => {
	return (
		<>
-    <IconBag16 />
+    <w-icon name="Bag" size="small"></w-icon>
    </>
	);
};
```

Similarly for the Elements icons:

```diff
- import "@warp-ds/icons/elements";
+ import "@warp-ds/elements"; // optional, @warp-ds/elements components are globally available on Aurora

export const render = () => {
	return `
-    <w-icon-attachment-16></w-icon-attachment-16>
+    <w-icon name="Attachment" size="small"></w-icon>
    </>
	`;
};
```