Icon

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

install	yarn add @clayui/icon
version
use	`import Icon from '@clayui/icon';`

Table of Contents

Icon List
Language Flags
Best Practices
Using Context
API Reference

Icon List

Search Icons

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
click
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
data-privacy
database
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-circle-full
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
semantic-search
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
task-status
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

Search Flags

ar-sa - Arabic - Saudi Arabia
bg-bg - Bulgarian - Bulgaria
bs-ba - Bosnian - Bosnia
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

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

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

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

Table of Contents

Icon List
Language Flags
Best Practices
Using Context
API Reference