Icon

yarn add @clayui/icon

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

Stable 3.56.0 View in Lexicon CHANGELOG

Icon List
Language Flags
Best Pratices
- Using Context

Icon List

Search Icons

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

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

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

Code Sample (expand to see it)