ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • 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.1.0View in LexiconCHANGELOGstorybook demos

  • Usage
  • Icon List
  • Language Flags
  • SVG Icons as Background Images
  • Clay-SVG-url()
  • Why do we use SVG?

Usage

We use SVG elements that link to an SVG sprite, like so:

<svg
	class="lexicon-icon lexicon-icon-add-column"
	focusable="false"
	role="presentation"
>
	<use xlink:href="path/to/icons.svg#add-column" />
</svg>

Note that the ID after the # symbol is the ID of the icon to use, so if you wanted to use plus icon, you would do change the href to path/to/icons.svg#plus.

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-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
  • blogs
  • bold
  • bolt
  • bookmarks
  • books
  • 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
  • check-circle-full
  • check-circle
  • check-small
  • check-square
  • check
  • chip
  • circle
  • closed-book
  • cloud
  • code
  • cog
  • color-picker
  • columns
  • comments
  • community
  • compress
  • container
  • control-panel
  • copy-rtl
  • copy
  • credit-card
  • custom-field
  • custom-size
  • cut
  • date
  • decimal
  • desktop
  • device-check
  • devices
  • 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
  • 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
  • fieldset
  • file-script
  • file-template
  • file-xsl
  • filter
  • flag-empty-rtl
  • flag-empty
  • flag-full-rtl
  • flag-full
  • folder
  • format
  • forms
  • full-size
  • geolocation
  • globe
  • google-drive
  • google
  • grid
  • h1
  • h2
  • hashtag
  • hdd
  • heart-full
  • heart
  • hidden
  • 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
  • mark-as-answer
  • mark-as-question
  • megaphone-full
  • merge
  • message-boards
  • message
  • minus-circle
  • mobile-device-rules
  • mobile-landscape
  • mobile-portrait
  • moon
  • move-folder
  • move
  • myspace
  • number
  • oauth
  • open-id
  • order-arrow-down
  • order-arrow-left
  • order-arrow-right
  • order-arrow-up
  • order-arrow
  • organizations
  • page-template
  • page
  • pages-tree
  • paperclip
  • paragraph
  • password-policies
  • paste-plaintext-rtl
  • paste-plaintext
  • paste-word-rtl
  • paste-word
  • paste
  • pause
  • pencil
  • phone
  • picture
  • pin-full
  • pin
  • play
  • plug
  • plus-squares
  • plus
  • polls
  • 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
  • rss-full
  • rss
  • rules
  • search-plus
  • search
  • select-all
  • select-from-list
  • select
  • separator
  • share-alt
  • share
  • sheets
  • shield-check
  • shopping-cart
  • shortcut
  • sign-in
  • 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
  • square
  • 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
  • warning-full
  • warning
  • web-content
  • wiki-page
  • wiki
  • workflow

Language Flags

People tend to have pretty strong opinions on whether flags should be used as a visual cue for indicating a language, mainly because in many parts of the world the flag may have cultural and geographic meanings that we might not be aware of, or the flag itself isn't fully accurate to the dialects spoken in that region.

While we understand this reasoning, we've found that when a user is not familiar with the currently displayed language, flags somewhat eliminate the use of other mechanisms, such as the name of the language (since the current language could be in an entirely different character set). Given this, there is often at least some familiarity with the identity of a country that speaks a shared language.

Or, to paraphrase Winston Churchill, "Using flags is the worst system for indicating language, except for all others". :)

To use the flags below, follow the same process as you would for a standard icon, and use the locale and country code indicated in parenthesis for the icon's name (e.g. to use the Japanese icon, you would use ja-jp)

  • ar-sa - Arabic - Saudi Arabia
  • bg-bg - Bulgarian - Bulgaria
  • ca-ad - Catalan - Andorra
  • 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-es - Spanish - Spain
  • 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
  • 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

SVG Icons as Background Images

We have created a Sass function to turn Lexicon SVG icon's into data uri schemes, which enables you to use them as a background images on an HTML element. The Sass function clay-icon(icon-name, color) takes the name of a Lexicon SVG Icon and a color. For example, the Sass rule set .site-add-cell { background-image: clay-icon(add-cell, #5AF); background-size: contain; display: inline-block; height: 20px; width: 20px; } will place the SVG icon add-cell as a background-image on any element with class site-add-cell.

add-celladd-columnadd-rowadjustalign-centerasterisktimes-circleworkflow

Clay-svg-url()

You can turn your custom SVG into a data uri using the Sass function clay-svg-url($svg), where $svg is the code for your inline SVG. The function returns url(your_svg_as_data_uri).

When using `clay-svg-url()`, wrap your inline SVG code with single quotes if your SVG's attributes are delimited with double quotes.
Linux Tux

Why do we use SVG

Font icons, while fairly simple, suffer drawbacks, such as sub-pixel aliasing. This results in a lower quality than we would like. SVG gives us and you a greater amount of freedom in styling the icons, as well as a higher level of fidelity and clarity in the icons. Also, SVG supports multi-color icons, as shown below:

How can this be improved? Create an issue!