Warp Design System

Appearance

Icons - Elements ​

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

AndroidreleasedElementsreleasediOSreleasedReact 19released

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 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 ​

NameTypeDefaultSummary
localestring-Locale used for <title> text.
namestring-Icon filename (without .svg)
size"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").

Types ​

"small" | "medium" | "large" | PixelValue | undefined ​

'small' | 'medium' | 'large' | ${number}px | undefined

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>
    </>
	`;
};

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system