Icons

Some props/prop values deprecated in SWAN v3.3
Refer to the information on props/prop values provided on the Usage tab. Find more information and migration documentation in the Deprecation roadmap.

Icon browserUsageAPI

Icons guide

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

<FlexBox gap="4">
  <Icon iconType="account" />
</FlexBox>

<FlexBox gap="4">
  <Icon iconType="account" />
</FlexBox>

For the Vanilla API, use img with the icon URL.

import { getSwanIconUrl } from '@vp/swan'

const url = getSwanIconUrl(logo)

const iconElem = document.createElement('img')
iconElem.setAttribute('src', url)
// Append the element at the position

import { getSwanIconUrl } from '@vp/swan'

const url = getSwanIconUrl(logo)

const iconElem = document.createElement('img')
iconElem.setAttribute('src', url)
// Append the element at the position

Size

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.

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" size="standard" mr={4} />
  <Icon iconType="account" size="16p" />
  <Icon iconType="account" size="20p" />
  <Icon iconType="account" size="24p" />
</FlexBox>

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" size="standard" mr={4} />
  <Icon iconType="account" size="16p" />
  <Icon iconType="account" size="20p" />
  <Icon iconType="account" size="24p" />
</FlexBox>

Skin

Standard

Use standard by default. This skin changes icons to white in darkMode.

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="standard" size="standard" />
  <Icon iconType="image" skin="standard" size="standard" />
  <Icon iconType="info" skin="standard" size="standard" />
  <Icon iconType="phone" skin="standard" size="standard" />
  <Icon iconType="heart" skin="standard" size="standard" />
  <Icon iconType="zoomIn" skin="standard" size="standard" />
  <Icon iconType="zoomOut" skin="standard" size="standard" />
  <Icon iconType="upload" skin="standard" size="standard" />
  <Icon iconType="download" skin="standard" size="standard" />
  <Icon iconType="liveChat" skin="standard" size="standard" />
</FlexBox>

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="standard" size="standard" />
  <Icon iconType="image" skin="standard" size="standard" />
  <Icon iconType="info" skin="standard" size="standard" />
  <Icon iconType="phone" skin="standard" size="standard" />
  <Icon iconType="heart" skin="standard" size="standard" />
  <Icon iconType="zoomIn" skin="standard" size="standard" />
  <Icon iconType="zoomOut" skin="standard" size="standard" />
  <Icon iconType="upload" skin="standard" size="standard" />
  <Icon iconType="download" skin="standard" size="standard" />
  <Icon iconType="liveChat" skin="standard" size="standard" />
</FlexBox>

Success

Use success for Icons that signify a positive or successful status.

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="success" size="standard" />
  <Icon iconType="image" skin="success" size="standard" />
  <Icon iconType="info" skin="success" size="standard" />
  <Icon iconType="phone" skin="success" size="standard" />
  <Icon iconType="heart" skin="success" size="standard" />
  <Icon iconType="zoomIn" skin="success" size="standard" />
  <Icon iconType="zoomOut" skin="success" size="standard" />
  <Icon iconType="upload" skin="success" size="standard" />
  <Icon iconType="download" skin="success" size="standard" />
  <Icon iconType="liveChat" skin="success" size="standard" />
</FlexBox>

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="success" size="standard" />
  <Icon iconType="image" skin="success" size="standard" />
  <Icon iconType="info" skin="success" size="standard" />
  <Icon iconType="phone" skin="success" size="standard" />
  <Icon iconType="heart" skin="success" size="standard" />
  <Icon iconType="zoomIn" skin="success" size="standard" />
  <Icon iconType="zoomOut" skin="success" size="standard" />
  <Icon iconType="upload" skin="success" size="standard" />
  <Icon iconType="download" skin="success" size="standard" />
  <Icon iconType="liveChat" skin="success" size="standard" />
</FlexBox>

Warning

Use warning for Icons that signify a caution status.

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="warning" size="standard" />
  <Icon iconType="image" skin="warning" size="standard" />
  <Icon iconType="info" skin="warning" size="standard" />
  <Icon iconType="phone" skin="warning" size="standard" />
  <Icon iconType="heart" skin="warning" size="standard" />
  <Icon iconType="zoomIn" skin="warning" size="standard" />
  <Icon iconType="zoomOut" skin="warning" size="standard" />
  <Icon iconType="upload" skin="warning" size="standard" />
  <Icon iconType="download" skin="warning" size="standard" />
  <Icon iconType="liveChat" skin="warning" size="standard" />
</FlexBox>

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="warning" size="standard" />
  <Icon iconType="image" skin="warning" size="standard" />
  <Icon iconType="info" skin="warning" size="standard" />
  <Icon iconType="phone" skin="warning" size="standard" />
  <Icon iconType="heart" skin="warning" size="standard" />
  <Icon iconType="zoomIn" skin="warning" size="standard" />
  <Icon iconType="zoomOut" skin="warning" size="standard" />
  <Icon iconType="upload" skin="warning" size="standard" />
  <Icon iconType="download" skin="warning" size="standard" />
  <Icon iconType="liveChat" skin="warning" size="standard" />
</FlexBox>

Error

Use error for Icons that signify an error status.

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="error" size="standard" />
  <Icon iconType="image" skin="error" size="standard" />
  <Icon iconType="info" skin="error" size="standard" />
  <Icon iconType="phone" skin="error" size="standard" />
  <Icon iconType="heart" skin="error" size="standard" />
  <Icon iconType="zoomIn" skin="error" size="standard" />
  <Icon iconType="zoomOut" skin="error" size="standard" />
  <Icon iconType="upload" skin="error" size="standard" />
  <Icon iconType="download" skin="error" size="standard" />
  <Icon iconType="liveChat" skin="error" size="standard" />
</FlexBox>

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="error" size="standard" />
  <Icon iconType="image" skin="error" size="standard" />
  <Icon iconType="info" skin="error" size="standard" />
  <Icon iconType="phone" skin="error" size="standard" />
  <Icon iconType="heart" skin="error" size="standard" />
  <Icon iconType="zoomIn" skin="error" size="standard" />
  <Icon iconType="zoomOut" skin="error" size="standard" />
  <Icon iconType="upload" skin="error" size="standard" />
  <Icon iconType="download" skin="error" size="standard" />
  <Icon iconType="liveChat" skin="error" size="standard" />
</FlexBox>

Accent

Use accent for Icons that signify a standout area or a brand moment.

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="accent" size="standard" />
  <Icon iconType="image" skin="accent" size="standard" />
  <Icon iconType="info" skin="accent" size="standard" />
  <Icon iconType="phone" skin="accent" size="standard" />
  <Icon iconType="heart" skin="accent" size="standard" />
  <Icon iconType="zoomIn" skin="accent" size="standard" />
  <Icon iconType="zoomOut" skin="accent" size="standard" />
  <Icon iconType="upload" skin="accent" size="standard" />
  <Icon iconType="download" skin="accent" size="standard" />
  <Icon iconType="liveChat" skin="accent" size="standard" />
</FlexBox>

<FlexBox flexWrap="wrap" gap="4">
  <Icon iconType="account" skin="accent" size="standard" />
  <Icon iconType="image" skin="accent" size="standard" />
  <Icon iconType="info" skin="accent" size="standard" />
  <Icon iconType="phone" skin="accent" size="standard" />
  <Icon iconType="heart" skin="accent" size="standard" />
  <Icon iconType="zoomIn" skin="accent" size="standard" />
  <Icon iconType="zoomOut" skin="accent" size="standard" />
  <Icon iconType="upload" skin="accent" size="standard" />
  <Icon iconType="download" skin="accent" size="standard" />
  <Icon iconType="liveChat" skin="accent" size="standard" />
</FlexBox>

White

white is deprecated in SWAN v3.3.2 Use "standard" instead in dark mode.

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.

<FlexBox flexWrap="wrap" gap="4" darkMode bgc="standard" p="4">
  <Icon iconType="account" skin="white" size="standard" />
  <Icon iconType="image" skin="white" size="standard" />
  <Icon iconType="info" skin="white" size="standard" />
  <Icon iconType="phone" skin="white" size="standard" />
  <Icon iconType="heart" skin="white" size="standard" />
  <Icon iconType="zoomIn" skin="white" size="standard" />
  <Icon iconType="zoomOut" skin="white" size="standard" />
  <Icon iconType="upload" skin="white" size="standard" />
  <Icon iconType="download" skin="white" size="standard" />
  <Icon iconType="liveChat" skin="white" size="standard" />
</FlexBox>

<FlexBox flexWrap="wrap" gap="4" darkMode bgc="standard" p="4">
  <Icon iconType="account" skin="white" size="standard" />
  <Icon iconType="image" skin="white" size="standard" />
  <Icon iconType="info" skin="white" size="standard" />
  <Icon iconType="phone" skin="white" size="standard" />
  <Icon iconType="heart" skin="white" size="standard" />
  <Icon iconType="zoomIn" skin="white" size="standard" />
  <Icon iconType="zoomOut" skin="white" size="standard" />
  <Icon iconType="upload" skin="white" size="standard" />
  <Icon iconType="download" skin="white" size="standard" />
  <Icon iconType="liveChat" skin="white" size="standard" />
</FlexBox>

Custom icons

Use Icon to create a custom icon that can follow SWAN's standard size variations. Pass the image URL into src.

<Icon src="https://picsum.photos/80/80" size="standard" />

<Icon src="https://picsum.photos/80/80" size="standard" />

objectFit

Use objectFit to control the resizing behavior of the image and how it fits into its parent element. Refer to CSS object-fit property.

<>
  <P>Intrinsic size for each image is 48x64</P>
  <GridContainer mt={6}>
    <Row>
      {swanStyleObjectFitValues.map(v => (
        <Column span={2} key={v}>
          <Icon
            size="48p"
            objectFit={v}
            src="https://via.placeholder.com/48x64/3f51b5/ffffff?text=1"
            alt="custom icon"
          />
          <h5>Object Fit: {v}</h5>
        </Column>
      ))}
    </Row>
  </GridContainer>
</>

<>
  <P>Intrinsic size for each image is 48x64</P>
  <GridContainer mt={6}>
    <Row>
      {swanStyleObjectFitValues.map(v => (
        <Column span={2} key={v}>
          <Icon
            size="48p"
            objectFit={v}
            src="https://via.placeholder.com/48x64/3f51b5/ffffff?text=1"
            alt="custom icon"
          />
          <h5>Object Fit: {v}</h5>
        </Column>
      ))}
    </Row>
  </GridContainer>
</>

Accessibility

When used inside a Button without text you must include an accessible label via one of the methods listed below.

Use alt with a descriptive value on the Icon.
Use aria-label with a descriptive value on the Button.
Use 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.
Use a visually hidden inner span with descriptive text.

If the icon is purely decorative, use aria-hidden="true" to hide it from assistive technologies

This text must be localized.

Props

Icon

This component is implemented using the <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.

See core props for additional props that can be applied to this component.

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" \| "accent" \| "success" \| "warning" \| "error" \| "white" \| null`	false	The visual style of the icon. One of: "white", "standard", "error", "warning", "success". 'white' option is deprecated - use 'standard' instead in dark mode	standard
iconType	`"standard" \| "menu" \| "search" \| "filter" \| "image" \| "text" \| "view" \| "list" \| "fill" \| "rotate" \| "download" \| "vertical" \| "email" \| "info" \| "success" \| "warning" \| "error" \| ... 132 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

Was this page useful?

Published: Jun 30, 2022Last updated: Oct 31, 2024

Grid Layout

Modes