menu
Menu
Mobify DevCenter
search_icon_focus

Icon

Icons communicate actions and give context to messaging through very simple imagery.

The Icon component renders an SVG that uses the chosen symbol from the SVG sprite present on the page.

Related component: IconLabel.

JavaScript import

import Icon from 'progressive-web-sdk/dist/components/icon'

SCSS import

@import 'node_modules/progressive-web-sdk/dist/components/icon/base';

Props table

Name & DescriptionTypeDefault
name

Identifier for the desired icon. Usually the filename, sans its prefix. For example, if the target icon is pw-chevron-up.svg, the name is chevron-up.

string''
className
Adds values to the class attribute of the root element.
stringnone
id

ID for the component, withUniqueId will be responsible for generating unique id to ensure that it's the same on the client and server-side.

stringnone
prefix

The prefix is the first part of the icon name/id. If you're using a different icon set, the prefix may need to be modified.

string'pw'
size
The size of the icon, controlled by CSS.
stringnone
style
Custom style attribute.
object{}
title

Beware that ommitting a title will leave the icon invisible to screen readers. If included, screen readers will read and treat the icon like an image with alt text.

union''

Prerequisite: SVG icon sprite

In order for the Icon component to work, an SVG icon sprite must be loaded into the page where the Icon component is used. The icon sprite technique used is the same as the one described by CSS Tricks, combined with an external SVG reference file for caching. It’s even possible to have multiple icon sprites (see the section below called “Example extra icon sprite”).

// It's recommended that the sprite value come from your state management
// system, which will be updated after a successful Ajax request.
const externallyLoadedSpriteXml = this.props.sprite
// Add this to the app once in a high level place. This way the sprite will
// only be loaded once, and will be available across all pages and components.
<DangerousHTML html={externallyLoadedSpriteXml}>
{(spriteString) => <div hidden dangerouslySetInnerHTML={spriteString} />}
</DangerousHTML>
// Once the above DangerousHTML is populated the sprite prop, Icon can be used
<Icon name="cart" />

Available icons

All available icons are stored inside <PROJECT_DIR>/app/static/svg/sprite-source/. To use an icon from that directory, set the name prop of the icon to the filename without the .svg extension. For example, to use the icon called zoom.svg, you could use the following:

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

Adding new icons

To add new icons to your project, place the SVGs inside the <PROJECT_DIR>/app/static/svg/sprite-source/ directory. Then, run the command npm run build-sprites. This will optimize your SVGs and add them to the SVG icon sprite.

Basic example

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/darkScreen Readers read me, but not the next icon

Icons should be treated like images, with accessible titles for screen readers. That means the title attribute must be filled with useful text.

If no title is provided, the icon will be hidden from screen readers. In other words, it will be aria-hidden: true.

Different sizes

Icons can take in a size prop. Common values include small, medium and large.

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

You can provide any string value into size and use its corresponding class to customize the appearance in any project. For example:

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

Extra icon sprite

It’s possible to have multiple icon sprites at once by adding the additional icon sprites to your page. An SVG sprite’s symbols should have unique prefixed IDs, such as id="custom-blob". You can then use the Icon component’s prefix and name props to reference your new icon sprite symbols.

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark