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

installyarn add @clayui/icon
versionNPM Version
useimport Icon from '@clayui/icon';

Icon List

  • accessibility
  • 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-full
  • bookmarks
  • books
  • border-style
  • border-width
  • box-container
  • braces
  • brackets
  • 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
  • content-shield
  • 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
  • gallery
  • 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
  • icon-rule-builder
  • 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
  • key
  • 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
  • marketplace
  • 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
  • repeat
  • remove-role
  • remove-style
  • reply
  • repository
  • reset
  • restore
  • rotate
  • rss-full
  • rss
  • ruler
  • rules
  • scim
  • search-experiences
  • search-plus
  • search
  • select-all
  • select-from-list
  • select
  • send
  • seo
  • separator
  • shadow
  • share-alt
  • share
  • sheets
  • shield-asterisk
  • shield-check
  • shopping-cart
  • shortcut
  • sign-in
  • signature
  • simple-circle
  • simulation-menu-closed
  • simulation-menu-open
  • simulation-menu
  • site-template
  • sites
  • slash
  • slideshow
  • social-facebook
  • social-instagram
  • social-linkedin
  • social-twitter
  • social-vimeo
  • spacer
  • special-character
  • speed
  • square-hole-multi
  • square-hole
  • square
  • squares-clock
  • squares
  • staging
  • star-half
  • star-o
  • star
  • stars
  • 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-x
  • twitter
  • underline
  • undo
  • unlock
  • unpin
  • upload-multiple
  • upload
  • urgent
  • user-plus
  • user
  • users
  • vertical-scroll
  • video-streaming
  • video
  • view
  • vocabulary
  • voice
  • 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-at - German - Austria
  • de-ch - German - Switzerland
  • de-de - German - Germany
  • el-gr - Greek - Greece
  • en-au - English - Australia
  • en-ca - English - Canada
  • en-gb - English - United Kingdom
  • en-ie - English - Ireland
  • en-lv - English - Latvia
  • 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-be - French - Belgium
  • fr-ca - French - Canada
  • fr-ch - French - Switzerland
  • 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-ch - Italian - Switzerland
  • 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
  • mk-mk - Macedonian - Macedonia
  • ms-my - Malay - Malaysia
  • my-mm - Burmese - Myanmar
  • nb-no - Norwegian Bokmål - Norway
  • nl-be - Dutch - Belgium
  • nl-nl - Dutch - Netherlands
  • no-no - Norwegian - Norway
  • pl-pl - Polish - Poland
  • pt-br - Portuguese - Brazil
  • pt-pt - Portuguese - Portugal
  • ro-ro - Romanian - Romania
  • ru-ru - Russian - Russia
  • rw-rw - Kinyarwanda - Rwanda
  • 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 Practices

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.

Snippet

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">.

Snippet

API Reference

Icon

React.ForwardRefExoticComponent<IProps & React.RefAttributes<SVGSVGElement>>
Parameters
Properties

className

string | undefined

spritemap

string | undefined

Path to the location of the spritemap resource.

symbol *

string

The id of the icon in the spritemap.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Krešimir Čoko, Olaf Kock, Patrick Yeo, Joshua Wu

Last edited May 12, 2025 at 7:56:02 PM