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.
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.
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.
Set the verticalAlign
prop to "baseline"
to align the icon to the text baseline.
Images can be used like icons by wrapping them in a container with the icon
class.
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.
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
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
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
Property | Required | Type | Default | Description |
---|---|---|---|---|
src | yes | String | The name of the icon | |
style | no | Object | Styles to apply | |
verticalAlign | no | oneOf(['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';