No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Icon

An Icon is a piece of visual element, but we must ensure its accessibility while using it. It can have 2 purposes:

  • decorative only: for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting aria-hidden attribute (ex: <Icon icon="check" aria-hidden />)
  • non-decorative: it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via aria-label for screen readers. (ex: <Icon icon="print" aria-label="Print this document" />)
There are 156 icons
  • mobile
  • watch
  • tablet
  • browser
  • sidebar
  • sidebaralt
  • bottombar
  • useralt
  • user
  • useradd
  • users
  • profile
  • bookmark
  • bookmarkhollow
  • book
  • repository
  • star
  • starhollow
  • circle
  • circlehollow
  • heart
  • hearthollow
  • facehappy
  • facesad
  • faceneutral
  • lock
  • unlock
  • key
  • arrowleftalt
  • arrowrightalt
  • sync
  • reply
  • undo
  • transfer
  • redirect
  • expand
  • expandalt
  • grow
  • arrowleft
  • arrowup
  • arrowdown
  • arrowright
  • chevrondown
  • back
  • download
  • upload
  • proceed
  • info
  • question
  • support
  • alert
  • bell
  • rss
  • edit
  • paintbrush
  • close
  • closeAlt
  • trash
  • cross
  • delete
  • add
  • subtract
  • plus
  • document
  • folder
  • component
  • calendar
  • graphline
  • docchart
  • doclist
  • category
  • grid
  • copy
  • certificate
  • print
  • listunordered
  • graphbar
  • menu
  • filter
  • ellipsis
  • cog
  • wrench
  • nut
  • camera
  • eye
  • eyeclose
  • photo
  • video
  • speaker
  • phone
  • flag
  • pin
  • compass
  • globe
  • location
  • search
  • zoom
  • zoomout
  • zoomreset
  • timer
  • time
  • lightning
  • lightningoff
  • dashboard
  • hourglass
  • play
  • stop
  • email
  • comment
  • requestchange
  • link
  • paperclip
  • box
  • structure
  • cpu
  • memory
  • database
  • power
  • outbox
  • share
  • button
  • form
  • check
  • batchaccept
  • batchdeny
  • home
  • admin
  • paragraph
  • basket
  • credit
  • shield
  • beaker
  • thumbsup
  • mirror
  • switchalt
  • commit
  • branch
  • merge
  • pullrequest
  • chromatic
  • twitter
  • google
  • gdrive
  • youtube
  • facebook
  • medium
  • graphql
  • redux
  • github
  • bitbucket
  • gitlab
  • discord
  • contrast
  • unfold
  • sharealt
  • accessibility
NameDescriptionDefault
icon*
string
-
block
bool
false
size
number
20
color
string
"inherit"

Stories

No Labels

Inline

this is an inline icon (default)

Block

this is a block icon