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.

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.

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.

ReferenceError: React is not defined

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

ReferenceError: React is not defined

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

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.

ReferenceError: React is not defined

To use icons in buttons, see the Buttons page.

Icon List

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

calendar

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

pivotal_ui_inverted

pivotal_ui_white

play_arrow

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

Imports

Import React components (including CSS):

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

Import CSS only:

import 'pivotal-ui/css/iconography';