This component is limited to projects that use Webpack. It requires the webpack loaders babel-loader and react-svg-loader.

npm install pui-react-iconography --save

npm install babel-loader react-svg-loader --save-dev


Property Required Type Default Description
src yes String Name of the svg to load
style no Object React Style Object
verticalAlign no oneOf('middle', 'baseline') 'middle' Alignment of icon

Basic usage

Import the subcomponent:

import {Icon} from 'pui-react-iconography';

Use the src attribute to load the appropriate icon. For a full list of available icons, go to http://pivotalicons.cfapps.io. You can also reference icons located in the app/svg folder at the root of your project (defined here as the location of your package.json). Create that directory and populate it with your custom svgs. Custom svgs must be suffixed ".svg," and they are referenced by the name of the svg (without the ".svg" suffix).

Icons by default will be sized based on the local font size. You can override the size of the icon by changing the font-size in the style prop:

Icons by default are vertically aligned 'middle'. This should align with most html elements except for text. Text in html has different alignment, so the default Icon alignment will look wrong. To align an Icon with text, set verticalAlign to 'baseline'


Spinner behavior is determined by size. Note that the large spinner moves relatively slowly, whereas the small spinner moves more quickly and dramatically. In all cases, the base height and width is 1em and is meant to be overwritten with a font-size attribute. The font sizes provided here are meant as suggestions.

This documentation generated using Hologram