Components

Icon

Design
Code

Graphically represent an object or action in limited space.

Use this component to add Uniform standard icons to your interface. Looking to create your own icons in our style? Follow the iconography guidelines.

Web
React Native
Android
Apple
Other
golf
<Icon
  type="golf"
  size="large"
/>

Props

type

string

The name of the icon excluding spaces and dashes.

size

oneOf
string

Determines the size of the icon.

  • small
  • medium (default)
  • large

color

oneOf
string

Determines the color of the icon.

  • contrast
  • default (default)
  • subtle
  • nonessential

className

string

Allows you to pass in a class to style the icon’s fill or hover styles.

label

string

Sets the text shown in the label when a user hovers over the icon. No label will be shown if this isn’t passed in.

labelPosition

oneOf
string

Determines where the label will show up when a user hovers over the icon.

  • top
  • bottom (default)
  • left
  • right

labelParent

string

If you're placing an icon in an absolutely positioned container, pass the id here to correctly position the icon label.

title

string

Sets the title element on the icon’s SVG. By default, the name of the icon is the title. If the name of the icon doesn’t match its meaning in your interface, be sure to pass a title to aid those using screen readers.

showBrowserTooltip

bool

Defaults to false. This determines whether or not to show the browser tooltip (which shows the icon’s title) when a user hovers over the icon.

qaId

string

A unique string to control this icon in automated tests.

children

element

Allows passing a custom icon element into the Icon component.

  • Work with a designer to export an optimized path on a 32x32 artboard.
  • Pass only the path or g element, not the outer svg.

Notes

  • Icons within buttons are automatically styled.
  • FileType icons are set to large size by default.
  • UI Control icons are set to small size by default. Certain UI Control icons may have different sizing which is indicated in the icon name.
  • The fill color of all icons are provided by the CSS styling. The exception to this are the FileType icons which have custom fill colors.

Icons

Effects

IconVariable
effectarroweffectarrow
effectcircleeffectcircle
effectcursoreffectcursor
effectfreehandeffectfreehand
effecttexteffecttext

Features & Navigation

IconVariable
drawingdrawing
exchangesexchanges
helphelp
highlightshighlights
logoutlogout
menumenu
messagesmessages
notificationsoffnotificationsoff
notificationsnotifications
playtoolsplaytools
reportsreports
searchsearch
settingssettings
uploadupload
videovideo

Feedback

IconVariable
confirmationconfirmation
criticalcritical
informationinformation
warningwarning

Filetype

IconVariable
filetypedocumentfiletypedocument
filetypeimagefiletypeimage
filetypeotherfiletypeother
filetypepdffiletypepdf
filetypepresentationfiletypepresentation
filetypespreadsheetfiletypespreadsheet
filetypevideofiletypevideo
filetypezipfiletypezip

Interaction

IconVariable
addadd
commentcomment
deletedelete
editedit
removeremove
shareshare

Logos

IconVariable
logofulllogofull
logomarklogomark

Media Playback

IconVariable
angle1angle1
angle2angle2
angle3angle3
angle4angle4
angle5angle5
angle6angle6
audiooffaudiooff
audioaudio
autoskipautoskip
backward5secbackward5sec
enterfullscreenenterfullscreen
exitfullscreenexitfullscreen
fastforwardfastforward
forward5secforward5sec
loopoffloopoff
looploop
nextnext
normalplaynormalplay
pausepause
playplay
previousprevious
replayreplay
rewindrewind
slowbackwardslowbackward
slowforwardslowforward

Permissions

IconVariable
restrictedrestricted

Sports

IconVariable
australianfootballaustralianfootball
baseballbaseball
basketballbasketball
cheercheer
cricketcricket
dancedance
fieldhockeyfieldhockey
footballfootball
golfgolf
gymnasticsgymnastics
hockeyhockey
lacrosselacrosse
netballnetball
othersportothersport
rugbyrugby
soccersoccer
softballsoftball
swimmingswimming
tennistennis
trackandfieldtrackandfield
volleyballvolleyball
waterpolowaterpolo
wrestlingwrestling

Technology

IconVariable
batterylowbatterylow
batterybattery
devicelandscapedevicelandscape
deviceportraitdeviceportrait
resolution4kresolution4k
resolutionhdresolutionhd
resolutionsdresolutionsd
wifiwarningwifiwarning
wifiwifi

UI Controls

IconVariable
uicollapseregionverticaluicollapseregionvertical
uidismissuidismiss
uiexpandregionverticaluiexpandregionvertical
uimoreuimore
uinewwindowuinewwindow
uireorderuireorder

User

IconVariable
useradduseradd
usergroupusergroup
useruser

Video Features

IconVariable
clipclip
keyboardshortcutskeyboardshortcuts
playlistaddplaylistadd
playlistplaylist