Hudl Design System

Last Modified:May 9, 2017

Icons

Using the React Component

Rather than copying and pasting lots of icon code all over the place, you could opt for the Icon component from Uniform-UI-Components.

While there is a relatively small set of icons currently available, the number will quickly grow and give you more of the icons you need to build product.

# Icons

{title ? title : "messages"}

Uniform-UI-Component

Documentation →

<Icon type="messages"/>

# Icon Sizes

Uniform-ui-css provides three different sizing options for icons. Additionally, you can use the sizing variables in your own CSS.
{title ? title : "messages"} {title ? title : "messages"} {title ? title : "messages"}

Uniform-UI-Component

Documentation →

<Icon type="messages" size="small"/>

# Icons List

Users

Name React Component
Text goes here User

<Icon type="user"/>

Text goes here User Add

<Icon type="useradd"/>

Text goes here User Group

<Icon type="usergroup"/>

Text goes here User (outline)

<Icon type="useroutline"/>

Text goes here User Add (outline)

<Icon type="useraddoutline"/>

Text goes here User Group (outline)

<Icon type="useraddoutline"/>

Interaction

Name React Component
Text goes here Add

<Icon type="add"/>

Text goes here Remove

<Icon type="remove"/>

Text goes here Comment

<Icon type="comment"/>

Text goes here Share

<Icon type="share"/>

Text goes here Delete

<Icon type="delete"/>

Text goes here Add (outline)

<Icon type="addoutline"/>

Text goes here Remove (outline)

<Icon type="removeoutline"/>

Text goes here Comment (outline)

<Icon type="commentoutline"/>

Text goes here Share (outline)

<Icon type="shareoutline"/>

Text goes here Delete (outline)

<Icon type="deleteoutline"/>

UI Controls

Name React Component
Text goes here More

<Icon type="uimore"/>

Text goes here Expand Region Vertical

<Icon type="uiexpandregionvertical"/>

Text goes here Collapse Region Vertical

<Icon type="uicollapseregionvertical"/>

Text goes here Dismiss

<Icon type="uidismiss"/>

Technology

Name React Component
Text goes here Wi-Fi

<Icon type="wifi"/>

Text goes here Wi-Fi Warning

<Icon type="wifiwarning"/>

Text goes here Battery

<Icon type="battery"/>

Text goes here Battery Low

<Icon type="batterylow"/>

Text goes here HD

<Icon type="resolutionhd"/>

Text goes here SD

<Icon type="resolutionsd"/>

Text goes here 4k

<Icon type="resolution4k"/>

Text goes here Device Portrait

<Icon type="deviceportrait"/>

Text goes here Device Landscape

<Icon type="devicelandscape"/>

Text goes here Wi-Fi (outline)

<Icon type="wifioutline"/>

Text goes here Wi-Fi Warning (outline)

<Icon type="wifiwarningoutline"/>

Text goes here Battery (outline)

<Icon type="batteryoutline"/>

Text goes here Battery Low (outline)

<Icon type="batterylowoutline"/>

Text goes here HD (outline)

<Icon type="resolutionhdoutline"/>

Text goes here SD (outline)

<Icon type="resolutionsdoutline"/>

Text goes here 4k (outline)

<Icon type="resolution4koutline"/>

Text goes here Device Portrait (outline)

<Icon type="deviceportraitoutline"/>

Text goes here Device Landscape (outline)

<Icon type="devicelandscapeoutline"/>

Features & Navigation

Name React Component
Text goes here Menu

<Icon type="menu"/>

Text goes here Upload

<Icon type="upload"/>

Text goes here Notifications

<Icon type="notifications"/>

Text goes here Notifications Off

<Icon type="notificationsoff"/>

Text goes here Messages

<Icon type="messages"/>

Text goes here Help

<Icon type="help"/>

Text goes here Settings

<Icon type="settings"/>

Text goes here Search

<Icon type="search"/>

Text goes here Video

<Icon type="video"/>

Text goes here Exchanges

<Icon type="exchanges"/>

Text goes here Highlights

<Icon type="highlights"/>

Text goes here Play Tools

<Icon type="playtools"/>

Text goes here Reports

<Icon type="reports"/>

Text goes here Log out

<Icon type="logout"/>

Text goes here Upload (outline)

<Icon type="uploadoutline"/>

Text goes here Messages (outline)

<Icon type="messagesoutline"/>

Text goes here Notifications (outline)

<Icon type="notificationsoutline"/>

Text goes here Notifications Off (outline)

<Icon type="notificationsoffoutline"/>

Text goes here Help (outline)

<Icon type="helpoutline"/>

Text goes here Settings (outline)

<Icon type="settingsoutline"/>

Text goes here Search (outline)

<Icon type="searchoutline"/>

Text goes here Video (outline)

<Icon type="videooutline"/>

Text goes here Exchanges (outline)

<Icon type="exchangesoutline"/>

Text goes here Highlights (outline)

<Icon type="highlightsoutline"/>

Text goes here Play Tools (outline)

<Icon type="playtoolsoutline"/>

Text goes here Reports (outline)

<Icon type="reportsoutline"/>

Text goes here Log out (outline)

<Icon type="logoutoutline"/>

Feedback

Name React Component
Text goes here Information

<Icon type="information"/>

Text goes here Confirmation

<Icon type="confirmation"/>

Text goes here Warning

<Icon type="warning"/>

Text goes here Critical

<Icon type="critical"/>

Text goes here Information (outline)

<Icon type="informationoutline"/>

Text goes here Confirmation (outline)

<Icon type="confirmationoutline"/>

Text goes here Warning (outline)

<Icon type="warningoutline"/>

Text goes here Critical (outline)

<Icon type="criticaloutline"/>

Reactions

Name React Component
Text goes here Reaction 100

<Icon type="reaction100"/>

Text goes here Reaction Fire

<Icon type="reactionfire"/>

Text goes here Reaction Heart

<Icon type="reactionheart"/>

Text goes here Reaction Lightning

<Icon type="reactionlightning"/>

Text goes here Reaction Top 5

<Icon type="reactiontop5"/>

Media Playback

Name React Component
Text goes here Play

<Icon type="play"/>

Text goes here Pause

<Icon type="pause"/>

Text goes here Rewind

<Icon type="rewind"/>

Text goes here Fast Forward

<Icon type="fastforward"/>

Text goes here Slow Backward

<Icon type="slowbackward"/>

Text goes here Slow Forward

<Icon type="slowforward"/>

Text goes here Rewind 5 Seconds

<Icon type="backward5sec"/>

Text goes here Forward 5 Seconds

<Icon type="forward5sec"/>

Text goes here Next

<Icon type="next"/>

Text goes here Previous

<Icon type="previous"/>

Text goes here Loop

<Icon type="loop"/>

Text goes here Loop Off

<Icon type="loopoff"/>

Text goes here Replay/Start Over

<Icon type="replay"/>

Text goes here Audio

<Icon type="audio"/>

Text goes here Audio Off

<Icon type="audiooff"/>

Text goes here Enter Fullscreen

<Icon type="enterfullscreen"/>

Text goes here Exit Fullscreen

<Icon type="exitfullscreen"/>

File Type Icons

Name React Component
Text goes here Video

<Icon type="filetype-video"/>

Text goes here Document

<Icon type="filetype-document"/>

Text goes here Image

<Icon type="filetype-image"/>

Text goes here Other

<Icon type="filetype-other"/>

Text goes here PDF

<Icon type="filetype-pdf"/>

Text goes here Presentation

<Icon type="filetype-presentation"/>

Text goes here Spreadsheet

<Icon type="filetype-spreadsheet"/>

Text goes here Zip

<Icon type="filetype-zip"/>

Sports Icons

Name React Component
Text goes here Volleyball

<Icon type="volleyball"/>

Text goes here Water Polo

<Icon type="waterpolo"/>

Text goes here Basketball

<Icon type="basketball"/>

Text goes here Baseball

<Icon type="baseball"/>

Text goes here Golf

<Icon type="golf"/>

Text goes here Football

<Icon type="football"/>

Text goes here Australian Football

<Icon type="australianfootball"/>

Text goes here Tennis

<Icon type="tennis"/>

Text goes here Soccer

<Icon type="soccer"/>

Text goes here Lacrosse

<Icon type="lacrosse"/>

Text goes here Field Hockey

<Icon type="fieldhockey"/>

Text goes here Softball

<Icon type="softball"/>

Text goes here Hockey

<Icon type="hockey"/>

Text goes here Track & Field

<Icon type="trackandfield"/>

Text goes here Swimming

<Icon type="swimming"/>

Text goes here Gymnastics

<Icon type="gymnastics"/>

Text goes here Wrestling

<Icon type="wrestling"/>

Text goes here Rugby

<Icon type="rugby"/>

Text goes here Netball

<Icon type="netball"/>

Text goes here Cricket

<Icon type="cricket"/>

Text goes here Cheer

<Icon type="cheer"/>

Text goes here Dance

<Icon type="dance"/>

Text goes here Other Sports

<Icon type="othersport"/>