⚠️ Some props/prop values deprecated in SWAN v3.3
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.
Icons are available in several formats and are suitable for different types of projects and platforms. You will need to include the icon stylesheet.
For the React API, use Icon with iconType
The preview has been updated.
For the Vanilla API, use img with the icon URL.
⚠️ 10p, 28p, 32p, 40p, 48p and 60p are deprecated in SWAN v3.3
Replace 10p with 16p. Replace larger sizes with standard, or consider if an illustration would be more suitable.
Use size to specify a size for icons. The standard size for icons is standard, which aligns with the body-standard font skin. The standard icon size is responsive and compact mode compatible. Icons can also be set to the static sizes 16p, 20p, and 24p.
The preview has been updated.
Use standard by default. This skin changes icons to white in darkMode.
The preview has been updated.
Use success for Icons that signify a positive or successful status.
The preview has been updated.
Use warning for Icons that signify a caution status.
The preview has been updated.
Use error for Icons that signify an error status.
The preview has been updated.
Use white for Icons placed on a dark background to increase their visibility. Note: The preferred way to display a white icon is to place an icon with the standard skin within a dark mode container.
The preview has been updated.
Use Icon to create a custom icon that can follow SWAN's standard size variations. Pass the image URL into src.
The preview has been updated.
Use objectFit to control the resizing behavior of the image and how it fits into its parent element. Refer to CSS object-fit property.
The preview has been updated.
When used inside a Button without text you must include an accessible label via one of the methods listed below.
alt with a descriptive value on the Icon.aria-label with a descriptive value on the Button.aria-labelledby if the Button has nearby descriptive text. Set the value of the attribute to the ID of the element containing the description text.If the icon is purely decorative, use aria-hidden="true" to hide it from assistive technologies
This text must be localized.
<img /> as the root element. You can utilize the native attributes supported by <img /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| size | "standard" | "10p" | "28p" | "32p" | "40p" | "48p" | "60p" | "16p" | "20p" | "24p" | null | false | The size of the icon.
One of: "standard", "10p", "16p", "20p", "24p", "28p", "32p", "40p", "48p", "60p"
Size "10p" is deprecated. Use "16p" size instead.
Size "28p", "32p", "40p", "48p" and "60p" are deprecated. Use "standard" size instead. | null |
| skin | "standard" | "success" | "warning" | "error" | "white" | null | false | The visual style of the icon.
One of: "white", "standard", "error", "warning", "success". | standard |
| iconType | "standard" | "menu" | "search" | "filter" | "image" | "text" | "view" | "list" | "rotate" | "download" | "vertical" | "email" | "info" | "success" | "warning" | "error" | "help" | ... 112 more ... | false | The type of icon to show. | null |
| objectFit | "none" | "fill" | "unset" | "contain" | "cover" | null | false | Sets the resizing behaviour of the image.
One of: "cover", "contain", "none", "unset", "fill" | null |
