Icon

View in Lexicon

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

install	yarn add @clayui/icon
version
use	import 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
• 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.

<ClayIcon symbol="heart" spritemap={spritemap} />

Using Context

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

<ClayIconSpriteContext.Provider value="/icons.svg">
	<ClayIcon symbol="add-cell" />
</ClayIconSpriteContext.Provider>