Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Icon

yarn add @clayui/icon

Icons are a visual representation of an idea and/or action.

  • Examples
  • Markup
  • API

Stable3.56.0View in LexiconCHANGELOGstorybook demos

  • Icon List
  • Language Flags
  • Best Pratices
    • Using Context

Icon List

  • add-cell
  • add-column
  • add-role
  • add-row
  • adjust
  • align-center
  • align-image-center
  • align-image-full-width
  • align-image-left
  • align-image-right
  • align-justify
  • align-left
  • align-right
  • analytics
  • angle-double-left-small
  • angle-double-left
  • angle-double-right-small
  • angle-double-right
  • angle-down-small
  • angle-down
  • angle-left-small
  • angle-left
  • angle-right-small
  • angle-right
  • angle-up-small
  • angle-up
  • announcement
  • anonymize
  • api-lock
  • api-web
  • archive
  • arrow-end
  • arrow-join
  • arrow-right-full
  • arrow-split
  • arrow-start
  • arrow-up-full
  • arrow-xor
  • asterisk
  • audio
  • automatic-translate
  • autosize
  • background-color
  • bars
  • bell-full
  • bell-off
  • bell-on
  • block
  • blogs
  • bold
  • bolt
  • book
  • bookmarks
  • books
  • border-style
  • border-width
  • box-container
  • breadcrumb
  • briefcase
  • button
  • calendar
  • camera
  • cards-full
  • cards
  • cards2
  • caret-bottom-l
  • caret-bottom
  • caret-double-l
  • caret-double
  • caret-left-l
  • caret-left
  • caret-right-l
  • caret-right
  • caret-top-l
  • caret-top
  • catalog
  • categories
  • chain-broken
  • change-list-disabled
  • change-list
  • change
  • chatbot
  • check-circle-full
  • check-circle
  • check-small
  • check-square
  • check
  • chip
  • circle
  • closed-book
  • cloud
  • code
  • cog
  • coin
  • color-picker
  • columns
  • comments
  • community
  • compress
  • container
  • control-panel
  • cookie
  • copy
  • corner-radius
  • credit-card
  • cursor
  • custom-field
  • custom-size
  • cut
  • date-time
  • date
  • decimal
  • desktop
  • device-check
  • devices
  • diagonal-line
  • diagram
  • diamond
  • diary
  • disk
  • display-content
  • display
  • document-code
  • document-compressed
  • document-default
  • document-image
  • document-multimedia
  • document-pdf
  • document-pending
  • document-presentation
  • document-table
  • document-text
  • document-vector
  • document
  • documents-and-media
  • dollar-symbol
  • download
  • drag
  • drop
  • dropdown
  • dynamic-data-list
  • dynamic-data-mapping
  • edit-layout
  • effects
  • ellipsis-h
  • ellipsis-v
  • embed
  • emoji
  • envelope-closed
  • envelope-open
  • environment-connected
  • environment-disconnected
  • environment
  • exclamation-circle
  • exclamation-full
  • expand
  • export
  • field-area
  • fieldset
  • file-script
  • file-template
  • file-xsl
  • filter
  • flag-empty
  • flag-full
  • folder-lock-line
  • folder-lock
  • folder
  • font-family
  • font-size
  • form-extensions
  • format
  • forms
  • full-size
  • geolocation
  • globe-lines
  • globe-pin
  • globe
  • google-drive
  • google
  • grid
  • h1
  • h2
  • hashtag
  • hdd
  • heading
  • heart-full
  • heart
  • hidden
  • hierarchy
  • home-full
  • home
  • horizontal-scroll
  • hr
  • import-export
  • import-list
  • import
  • indent-less
  • indent-more
  • info-book
  • info-circle-open
  • info-circle
  • info-panel-closed
  • info-panel-open
  • information-live
  • integer
  • italic
  • liferay-ac
  • link
  • list-ol-rtl
  • list-ol
  • list-ul-rtl
  • list-ul
  • list
  • live
  • lock-dots
  • lock
  • logout
  • low-vision
  • magic
  • maps
  • mark-as-answer
  • mark-as-question
  • megaphone-full
  • merge
  • message-boards
  • message
  • minus-circle
  • mobile-device-rules
  • mobile-devices
  • mobile-landscape
  • mobile-portrait
  • moon
  • move-folder
  • move
  • myspace
  • no-bot
  • nodes
  • number
  • oauth
  • opacity
  • open-id
  • order-arrow-down
  • order-arrow-left
  • order-arrow-right
  • order-arrow-up
  • order-arrow
  • order-ascending
  • order-descending
  • order-form-cog
  • order-form-pencil
  • order-form-tag
  • order-form
  • order-list-down
  • order-list-up
  • organizations
  • page-template
  • page
  • pages-tree
  • paperclip
  • paragraph
  • password-policies
  • paste-plaintext
  • paste-word
  • paste
  • pause
  • pencil
  • percentage-banner
  • percentage-symbol
  • phone
  • picture
  • pin-full
  • pin
  • play
  • plug
  • plus-squares
  • plus
  • polls
  • price-tag
  • print
  • product-menu-closed
  • product-menu-open
  • product-menu
  • propagation
  • question-circle-full
  • question-circle
  • quote-left
  • quote-right
  • radio-button
  • react
  • rectangle-split
  • rectangle
  • redo
  • relationship
  • reload
  • remove-role
  • remove-style
  • reply
  • repository
  • reset
  • restore
  • rotate
  • rss-full
  • rss
  • ruler
  • rules
  • search-experiences
  • search-plus
  • search
  • select-all
  • select-from-list
  • select
  • separator
  • shadow
  • share-alt
  • share
  • sheets
  • shield-check
  • shopping-cart
  • shortcut
  • sign-in
  • signature
  • simple-circle
  • simulation-menu-closed
  • simulation-menu-open
  • simulation-menu
  • site-template
  • sites
  • slideshow
  • social-facebook
  • social-instagram
  • social-linkedin
  • social-twitter
  • social-vimeo
  • spacer
  • special-character
  • square-hole-multi
  • square-hole
  • square
  • squares-clock
  • squares
  • staging
  • star-half
  • star-o
  • star
  • sticky
  • strikethrough
  • subscript
  • suitcase
  • sun
  • superscript
  • table
  • table2
  • tablet-landscape
  • tablet-portrait
  • tabs
  • tag
  • tap-ahead
  • test
  • text-color
  • text-editor
  • text-l
  • text
  • textbox
  • theme
  • third-party
  • thumbs-down-full
  • thumbs-down
  • thumbs-up-arrow
  • thumbs-up-full
  • thumbs-up
  • time
  • times-circle-full
  • times-circle
  • times-small
  • times
  • transform
  • trash
  • truck
  • twitter
  • underline
  • undo
  • unlock
  • unpin
  • upload-multiple
  • upload
  • urgent
  • user-plus
  • user
  • users
  • vertical-scroll
  • video
  • view
  • vocabulary
  • warehouse
  • warning-full
  • warning
  • web-content
  • wiki-page
  • wiki
  • workflow

Language Flags

  • ar-sa - Arabic - Saudi Arabia
  • bg-bg - Bulgarian - Bulgaria
  • ca-ad - Catalan - Andorra
  • ca-es-valencia - Catalan - Valencia
  • ca-es - Catalan - Spain
  • cs-cz - Czech - Czech Republic
  • da-dk - Danish - Denmark
  • de-de - German - Germany
  • el-gr - Greek - Greece
  • en-au - English - Australia
  • en-gb - English - United Kingdom
  • en-us - English - United States
  • es-ar - Spanish - Argentina
  • es-co - Spanish - Colombia
  • es-es - Spanish - Spain
  • es-mx - Spanish - Mexico
  • et-ee - Estonian - Estonia
  • eu-es - Basque - Spain
  • fa-ir - Farsi - Iran
  • fi-fi - Finnish - Finland
  • fr-ca - French - Canada
  • fr-fr - French - France
  • gl-es - Galician - Spain
  • hi-in - Hindi - India
  • hr-hr - Croatian - Croatia
  • hu-hu - Hungarian - Hungary
  • in-id - Indonesian - Indonesia
  • it-it - Italian - Italy
  • iw-il - Hebrew - Israel
  • ja-jp - Japanese - Japan
  • kk-kz - Kazakh - Kazakhstan
  • km-kh - Cambodia
  • ko-kr - Korean - South Korea
  • lo-la - Lao - Laos
  • lt-lt - Lithuanian - Lithuania
  • ms-my - Malay - Malaysia
  • nb-no - Norwegian Bokmål - Norway
  • nl-be - Dutch - Belgium
  • nl-nl - Dutch - Netherlands
  • pl-pl - Polish - Poland
  • pt-br - Portuguese - Brazil
  • pt-pt - Portuguese - Portugal
  • ro-ro - Romanian - Romania
  • ru-ru - Russian - Russia
  • sk-sk - Slovak - Slovakia
  • sl-si - Slovenian - Slovenia
  • sr-rs-latin - Serbian Latin - Serbia
  • sr-rs - Serbian - Serbia
  • sv-se - Swedish - Sweden
  • ta-in - Tamil - India
  • th-th - Thai - Thailand
  • tr-tr - Turkish - Turkey
  • uk-ua - Ukrainian - Ukraine
  • vi-vn - Vietnamese - Vietnam
  • zh-cn - Chinese - China
  • zh-tw - Chinese - Taiwan

Best Pratices

For Icons, we use SVG elements that link to an SVG sprite. So, it becomes necessary to pass a parameter that points to a path where this spritemap is located. If you are using the spritemap from @clayui/css you can download that svg here.

Copied!

Using Context

For V3, an API was added to utilize context for passing spritemap down instead of having to pass the prop everywhere.

Add import { ClayIconSpriteContext } from "@clayui/icon" use the context as a provider. <ClayIconSpriteContext.Provider value="path/to/sprite.svg">.

Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!