Skip to main content

Pivotal UI

v18.1.1

Icons

Use the Icon component to insert an SVG icons. The full list of icons that Pivotal UI provides, along with their names, can be found here.

To use an icon, specify the name of the icon as the src prop.

Icon examples
ReferenceError: React is not defined

By default, the icons are quite small. They inherit the font size of their parent. This means they can be resized by, for example, wrapping them in an <h1> or explicitly setting a font size on the parent.

Larger icon examples
ReferenceError: React is not defined

When styling the SVGs, use the fill or stroke attributes instead of color. These can be set directly on the Icon as a style prop or via CSS. A useful trick is to set fill to currentColor, so that the fill color is inherited from the text color of the icon's container.

Color icon examples
ReferenceError: React is not defined

Set the verticalAlign prop to "baseline" to align the icon to the text baseline.

Alignment with text
ReferenceError: React is not defined

Images can be used like icons by wrapping them in a container with the icon class.

Images as icons
The following image is wrapped as an icon
.

Pivotal UI provides three variations on the spinner icon, differing in their speed.

spinner-lg is the slowest, spinner-md is the default, and spinner-sm is the fastest. Use spinner-md in most cases.

Spinner icons
ReferenceError: React is not defined

To use icons in buttons, see the Buttons page.

Icon List

103 / 103
account_circle
add
add_circle
add_circle_outline
apple_logo
arrow_back
arrow_downward
arrow_drop_down
arrow_drop_left
arrow_drop_right
arrow_drop_up
arrow_forward
arrow_up_circle
arrow_upward
autorenew
cached
cancel
chat
check
check_circle
check_circle_outline
chevron_down
chevron_left
chevron_right
chevron_up
circle
circle_outline
close
close_circle_outline
cloud_done
cloud_download
cloud_upload
code
collapse
compare_arrows_alt
copy
database
download
error
error_outline
euro_symbol
exit_to_app
feedback
filter_list
format_align_center
format_align_justify
format_align_left
format_align_right
github
grip
help
help_outline
highlight
html5
info
info_outline
laptop
link
link_disconnect
linux_logo
menu
mode_edit
more_horiz
more_vert
notifications
open_in_new
pause
person
pivotal_p
pivotal_pws
Pivotal UI A
pivotal_ui
Pivotal UI B
pivotal_ui_inverted
Pivotal UI A
pivotal_ui_white
play_arrow
plug-alt
plug
print
react
refresh
remove
remove_circle
remove_circle_outline
report
rocket
search
select_chevrons
settings
sliders
smartphone
sort
spinner_lg
spinner_md
spinner_sm
stop
terminal
trash
upload
vertical_align_bottom
vertical_align_center
vertical_align_top
warning
windows_logo
zoom_in
zoom_out

Props

PropertyRequiredTypeDefaultDescription
srcyesStringThe name of the icon
stylenoObjectStyles to apply
verticalAlignnooneOf(['middle', 'baseline'])'middle'Vertical alignment

Imports

Import React components (including CSS):

import {Icon} from 'pivotal-ui/react/iconography';

Import CSS only:

import 'pivotal-ui/css/iconography';