Icons

The icon set is closed: tuix-icon draws one of the 88 icons below and nothing else. The enum member is the attribute value in SCREAMING_CASE, so IconName.ARROW_DOWN is name="arrow-down".

<tuix-icon name="arrow-down"></tuix-icon>

import { TuixIcon } from 'tuix-webcomponents/react'
import { IconName } from 'tuix-webcomponents'
 
;<TuixIcon name={IconName.ARROW_DOWN} />

Every icon is below. The field above the grid filters them by name, and selecting one copies its name to the clipboard. To see them at every size and colour, open Storybook.

Enum members

Member	`name`
`IconName.ARROW_DOWN`	`arrow-down`
`IconName.ARROW_LEFT`	`arrow-left`
`IconName.ARROW_UP`	`arrow-up`
`IconName.ARROW_RIGHT`	`arrow-right`
`IconName.SEARCH`	`search`
`IconName.EYE_ON`	`eye-on`
`IconName.EYE_OFF`	`eye-off`
`IconName.EYE_CLOSE_LINE`	`eye-close-line`
`IconName.TRIANGLE_EXCLAMATION`	`triangle-exclamation`
`IconName.CIRCLE_X`	`circle-x`
`IconName.LOADER`	`loader`
`IconName.LOADER_CIRCLE`	`loader-circle`
`IconName.CIRCLE_CHECK`	`circle-check`
`IconName.CHEVRON_DOWN`	`chevron-down`
`IconName.CHEVRON_UP`	`chevron-up`
`IconName.CHEVRON_LEFT`	`chevron-left`
`IconName.CHEVRON_RIGHT`	`chevron-right`
`IconName.CHECK`	`check`
`IconName.NAV_HAMBURGUER`	`nav-hamburguer`
`IconName.SUN`	`sun`
`IconName.MOON`	`moon`
`IconName.BOOKMARK`	`bookmark`
`IconName.UPLOAD`	`upload`
`IconName.DOWNLOAD`	`download`
`IconName.MAP_PIN`	`map-pin`
`IconName.PHONE`	`phone`
`IconName.MAIL`	`mail`
`IconName.MAILS`	`mails`
`IconName.LAYERS`	`layers`
`IconName.SEND`	`send`
`IconName.FILE`	`file`
`IconName.FORMAT_LIST`	`format-list`
`IconName.SAVE`	`save`
`IconName.SQUARE_CODE`	`square-code`
`IconName.BRACES`	`braces`
`IconName.ADD_MAIL`	`add-mail`
`IconName.MAIL_LOGO`	`mail-logo`
`IconName.BUILDING`	`building`
`IconName.CODE`	`code`
`IconName.USER_PLUS`	`user-plus`
`IconName.FACEBOOK`	`facebook`
`IconName.TWITTER`	`twitter`
`IconName.LINKEDIN`	`linkedin`
`IconName.SHARE`	`share`
`IconName.COPY`	`copy`
`IconName.GOOGLE`	`google`
`IconName.BELL`	`bell`
`IconName.GEAR`	`gear`
`IconName.LOGOUT`	`logout`
`IconName.CIRCLE_EXCLAMATION`	`circle-exclamation`
`IconName.CAMERA`	`camera`
`IconName.PENCIL`	`pencil`
`IconName.X`	`x`
`IconName.PLUS`	`plus`
`IconName.INVOICE`	`invoice`
`IconName.DELETE`	`delete`
`IconName.TRIANGLE_ARROW_DOWN`	`triangle-arrow-down`
`IconName.USERS`	`users`
`IconName.CLOCK`	`clock`
`IconName.CHECK_CLOCK`	`check-clock`
`IconName.GLOBE`	`globe`
`IconName.CALENDAR`	`calendar`
`IconName.STATS`	`stats`
`IconName.HOLIDAYS`	`holidays`
`IconName.TRENDING_UP`	`trending-up`
`IconName.ARCHIVE`	`archive`
`IconName.ACCESS_TOKEN`	`access-token`
`IconName.RESIZE`	`resize`
`IconName.CHAT`	`chat`
`IconName.MESSAGE_CIRCLE`	`message-circle`
`IconName.BOOK`	`book`
`IconName.BOOK_PLUS`	`book-plus`
`IconName.BOOKS`	`books`
`IconName.BOOK_SEARCH`	`book-search`
`IconName.MORE_HORIZONTAL`	`more-horizontal`
`IconName.BOT`	`bot`
`IconName.SCROLL_DOWN`	`scroll-down`
`IconName.PLAY`	`play`
`IconName.EXTERNAL_LINK`	`external-link`
`IconName.TRIANGLE_RIGHT`	`triangle-right`
`IconName.FILE_PLUS`	`file-plus`
`IconName.FILE_TEXT`	`file-text`
`IconName.HIGHLIGHT`	`highlight`
`IconName.MCP_LOGO`	`mcp-logo`
`IconName.ENDPOINTS`	`endpoints`
`IconName.PLAY_OUTLINE`	`play-outline`
`IconName.REFRESH`	`refresh`
`IconName.SHIELD`	`shield`

The set is closed, so an icon that is not listed above cannot be passed to name. New icons are added to the library itself, on a 24x24 viewBox: draw the shape with stroke and leave the root <svg> at fill="none". Every stroke is then recoloured at render time from color, and fill paints the enclosed area when it is set, so an icon only has to be drawn once to work in every colour and theme. Open an issue on the repository with the SVG and it ships with the next release.

Icons

Names

Enum members

Missing an icon?

On this page