Icon

import {VsIcon} from "@qui/react-vscode"

Examples

Icons

Theme:

Dark Modern

import {ReactNode} from "react"

import {Icon} from "@qui/react-vscode"

export default function Icons(): ReactNode {
  return (
    <div className="text-foreground flex items-end gap-2">
      <Icon icon="account" size={16} />
      <Icon icon="account" size={24} />
      <Icon icon="account" size={32} />
      <Icon icon="account" size={40} />
    </div>
  )
}

Action

The icon's style will update to reflect a clickable action when you render it as a button or a element.

Theme:

Dark Modern

import {ReactNode} from "react"

import {Icon} from "@qui/react-vscode"

export default function Action(): ReactNode {
  return (
    <div className="text-foreground">
      <Icon as="button" icon="account" size={24} />
    </div>
  )
}

Icon Search

Theme:

Dark Modern

API

IconProps

Name & Description	Option(s)	Default
icon ^* Specifies the codicon name to use.	\| 'account' \| 'activate-breakpoints' \| 'add' \| 'alert' \| 'archive' \| 'array' \| 'arrow-both' \| 'arrow-circle-down' \| 'arrow-circle-left' \| 'arrow-circle-right' \| 'arrow-circle-up' \| 'arrow-down' \| 'arrow-left' \| 'arrow-right' \| 'arrow-small-down' \| 'arrow-small-left' \| 'arrow-small-right' \| 'arrow-small-up' \| 'arrow-swap' \| 'arrow-up' \| 'attach' \| 'azure' \| 'azure-devops' \| 'beaker' \| 'beaker-stop' \| 'bell' \| 'bell-dot' \| 'bell-slash' \| 'bell-slash-dot' \| 'blank' \| 'bold' \| 'book' \| 'bookmark' \| 'bracket' \| 'bracket-dot' \| 'bracket-error' \| 'briefcase' \| 'broadcast' \| 'browser' \| 'bug' \| 'calendar' \| 'call-incoming' \| 'call-outgoing' \| 'case-sensitive' \| 'check' \| 'check-all' \| 'checklist' \| 'chevron-down' \| 'chevron-left' \| 'chevron-right' \| 'chevron-up' \| 'chip' \| 'chrome-close' \| 'chrome-maximize' \| 'chrome-minimize' \| 'chrome-restore' \| 'circle' \| 'circle-filled' \| 'circle-large' \| 'circle-large-filled' \| 'circle-large-outline' \| 'circle-outline' \| 'circle-slash' \| 'circle-small' \| 'circle-small-filled' \| 'circuit-board' \| 'clear-all' \| 'clippy' \| 'clock' \| 'clone' \| 'close' \| 'close-all' \| 'close-dirty' \| 'cloud' \| 'cloud-download' \| 'cloud-upload' \| 'code' \| 'code-oss' \| 'code-review' \| 'coffee' \| 'collapse-all' \| 'color-mode' \| 'combine' \| 'comment' \| 'comment-add' \| 'comment-discussion' \| 'comment-draft' \| 'comment-unresolved' \| 'compare-changes' \| 'compass' \| 'compass-active' \| 'compass-dot' \| 'console' \| 'copilot' \| 'copilot-large' \| 'copilot-warning' \| 'copilot-warning-large' \| 'copy' \| 'coverage' \| 'credit-card' \| 'dash' \| 'dashboard' \| 'database' \| 'debug' \| 'debug-all' \| 'debug-alt' \| 'debug-alt-small' \| 'debug-breakpoint' \| 'debug-breakpoint-conditional' \| 'debug-breakpoint-conditional-disabled' \| 'debug-breakpoint-conditional-unverified' \| 'debug-breakpoint-data' \| 'debug-breakpoint-data-disabled' \| 'debug-breakpoint-data-unverified' \| 'debug-breakpoint-disabled' \| 'debug-breakpoint-function' \| 'debug-breakpoint-function-disabled' \| 'debug-breakpoint-function-unverified' \| 'debug-breakpoint-log' \| 'debug-breakpoint-log-disabled' \| 'debug-breakpoint-log-unverified' \| 'debug-breakpoint-unsupported' \| 'debug-breakpoint-unverified' \| 'debug-console' \| 'debug-continue' \| 'debug-continue-small' \| 'debug-coverage' \| 'debug-disconnect' \| 'debug-hint' \| 'debug-line-by-line' \| 'debug-pause' \| 'debug-rerun' \| 'debug-restart' \| 'debug-restart-frame' \| 'debug-reverse-continue' \| 'debug-stackframe' \| 'debug-stackframe-active' \| 'debug-stackframe-dot' \| 'debug-stackframe-focused' \| 'debug-start' \| 'debug-step-back' \| 'debug-step-into' \| 'debug-step-out' \| 'debug-step-over' \| 'debug-stop' \| 'desktop-download' \| 'device-camera' \| 'device-camera-video' \| 'device-desktop' \| 'device-mobile' \| 'diff' \| 'diff-added' \| 'diff-ignored' \| 'diff-modified' \| 'diff-multiple' \| 'diff-removed' \| 'diff-renamed' \| 'diff-sidebyside' \| 'diff-single' \| 'discard' \| 'edit' \| 'edit-session' \| 'editor-layout' \| 'ellipsis' \| 'empty-window' \| 'error' \| 'error-small' \| 'exclude' \| 'expand-all' \| 'export' \| 'extensions' \| 'eye' \| 'eye-closed' \| 'eye-unwatch' \| 'eye-watch' \| 'feedback' \| 'file' \| 'file-add' \| 'file-binary' \| 'file-code' \| 'file-directory' \| 'file-directory-create' \| 'file-media' \| 'file-pdf' \| 'file-submodule' \| 'file-symlink-directory' \| 'file-symlink-file' \| 'file-text' \| 'file-zip' \| 'files' \| 'filter' \| 'filter-filled' \| 'flame' \| 'fold' \| 'fold-down' \| 'fold-horizontal' \| 'fold-horizontal-filled' \| 'fold-up' \| 'fold-vertical' \| 'fold-vertical-filled' \| 'folder' \| 'folder-active' \| 'folder-library' \| 'folder-opened' \| 'game' \| 'gather' \| 'gear' \| 'gift' \| 'gist' \| 'gist-fork' \| 'gist-new' \| 'gist-private' \| 'gist-secret' \| 'git-branch' \| 'git-branch-create' \| 'git-branch-delete' \| 'git-commit' \| 'git-compare' \| 'git-fork-private' \| 'git-merge' \| 'git-pull-request' \| 'git-pull-request-abandoned' \| 'git-pull-request-assignee' \| 'git-pull-request-closed' \| 'git-pull-request-create' \| 'git-pull-request-draft' \| 'git-pull-request-go-to-changes' \| 'git-pull-request-label' \| 'git-pull-request-milestone' \| 'git-pull-request-new-changes' \| 'git-pull-request-reviewer' \| 'git-stash' \| 'git-stash-apply' \| 'git-stash-pop' \| 'github' \| 'github-action' \| 'github-alt' \| 'github-inverted' \| 'github-project' \| 'globe' \| 'go-to-editing-session' \| 'go-to-file' \| 'go-to-search' \| 'grabber' \| 'graph' \| 'graph-left' \| 'graph-line' \| 'graph-scatter' \| 'gripper' \| 'group-by-ref-type' \| 'heart' \| 'heart-filled' \| 'history' \| 'home' \| 'horizontal-rule' \| 'hubot' \| 'inbox' \| 'indent' \| 'info' \| 'insert' \| 'inspect' \| 'issue-closed' \| 'issue-draft' \| 'issue-opened' \| 'issue-reopened' \| 'issues' \| 'italic' \| 'jersey' \| 'json' \| 'kebab-horizontal' \| 'kebab-vertical' \| 'key' \| 'keyboard' \| 'law' \| 'layers' \| 'layers-active' \| 'layers-dot' \| 'layout' \| 'layout-activitybar-left' \| 'layout-activitybar-right' \| 'layout-centered' \| 'layout-menubar' \| 'layout-panel' \| 'layout-panel-center' \| 'layout-panel-justify' \| 'layout-panel-left' \| 'layout-panel-off' \| 'layout-panel-right' \| 'layout-sidebar-left' \| 'layout-sidebar-left-off' \| 'layout-sidebar-right' \| 'layout-sidebar-right-off' \| 'layout-statusbar' \| 'library' \| 'light-bulb' \| 'lightbulb' \| 'lightbulb-autofix' \| 'lightbulb-sparkle' \| 'link' \| 'link-external' \| 'list-filter' \| 'list-flat' \| 'list-ordered' \| 'list-selection' \| 'list-tree' \| 'list-unordered' \| 'live-share' \| 'loading' \| 'location' \| 'lock' \| 'lock-small' \| 'log-in' \| 'log-out' \| 'logo-github' \| 'magnet' \| 'mail' \| 'mail-read' \| 'mail-reply' \| 'map' \| 'map-filled' \| 'map-horizontal' \| 'map-horizontal-filled' \| 'map-vertical' \| 'map-vertical-filled' \| 'mark-github' \| 'markdown' \| 'megaphone' \| 'mention' \| 'menu' \| 'merge' \| 'mic' \| 'mic-filled' \| 'microscope' \| 'milestone' \| 'mirror' \| 'mirror-private' \| 'mirror-public' \| 'more' \| 'mortar-board' \| 'move' \| 'multiple-windows' \| 'music' \| 'mute' \| 'new-file' \| 'new-folder' \| 'newline' \| 'no-newline' \| 'note' \| 'notebook' \| 'notebook-template' \| 'octoface' \| 'open-preview' \| 'organization' \| 'organization-filled' \| 'organization-outline' \| 'output' \| 'package' \| 'paintcan' \| 'pass' \| 'pass-filled' \| 'pencil' \| 'percentage' \| 'person' \| 'person-add' \| 'person-filled' \| 'person-follow' \| 'person-outline' \| 'piano' \| 'pie-chart' \| 'pin' \| 'pinned' \| 'pinned-dirty' \| 'play' \| 'play-circle' \| 'plug' \| 'plus' \| 'preserve-case' \| 'preview' \| 'primitive-dot' \| 'primitive-square' \| 'project' \| 'pulse' \| 'python' \| 'question' \| 'quote' \| 'radio-tower' \| 'reactions' \| 'record' \| 'record-keys' \| 'record-small' \| 'redo' \| 'references' \| 'refresh' \| 'regex' \| 'remote' \| 'remote-explorer' \| 'remove' \| 'remove-close' \| 'repl' \| 'replace' \| 'replace-all' \| 'reply' \| 'repo' \| 'repo-clone' \| 'repo-create' \| 'repo-delete' \| 'repo-fetch' \| 'repo-force-push' \| 'repo-forked' \| 'repo-pull' \| 'repo-push' \| 'repo-sync' \| 'report' \| 'request-changes' \| 'robot' \| 'rocket' \| 'root-folder' \| 'root-folder-opened' \| 'rss' \| 'ruby' \| 'run' \| 'run-above' \| 'run-all' \| 'run-all-coverage' \| 'run-below' \| 'run-coverage' \| 'run-errors' \| 'save' \| 'save-all' \| 'save-as' \| 'screen-full' \| 'screen-normal' \| 'search' \| 'search-fuzzy' \| 'search-save' \| 'search-stop' \| 'selection' \| 'send' \| 'server' \| 'server-environment' \| 'server-process' \| 'settings' \| 'settings-gear' \| 'share' \| 'shield' \| 'sign-in' \| 'sign-out' \| 'smiley' \| 'snake' \| 'sort-percentage' \| 'sort-precedence' \| 'source-control' \| 'sparkle' \| 'sparkle-filled' \| 'split-horizontal' \| 'split-vertical' \| 'squirrel' \| 'star' \| 'star-add' \| 'star-delete' \| 'star-empty' \| 'star-full' \| 'star-half' \| 'stop' \| 'stop-circle' \| 'surround-with' \| 'symbol-array' \| 'symbol-boolean' \| 'symbol-class' \| 'symbol-color' \| 'symbol-constant' \| 'symbol-constructor' \| 'symbol-enum' \| 'symbol-enum-member' \| 'symbol-event' \| 'symbol-field' \| 'symbol-file' \| 'symbol-folder' \| 'symbol-function' \| 'symbol-interface' \| 'symbol-key' \| 'symbol-keyword' \| 'symbol-method' \| 'symbol-misc' \| 'symbol-module' \| 'symbol-namespace' \| 'symbol-null' \| 'symbol-number' \| 'symbol-numeric' \| 'symbol-object' \| 'symbol-operator' \| 'symbol-package' \| 'symbol-parameter' \| 'symbol-property' \| 'symbol-reference' \| 'symbol-ruler' \| 'symbol-snippet' \| 'symbol-string' \| 'symbol-struct' \| 'symbol-structure' \| 'symbol-text' \| 'symbol-type-parameter' \| 'symbol-unit' \| 'symbol-value' \| 'symbol-variable' \| 'sync' \| 'sync-ignored' \| 'table' \| 'tag' \| 'tag-add' \| 'tag-remove' \| 'target' \| 'tasklist' \| 'telescope' \| 'terminal' \| 'terminal-bash' \| 'terminal-cmd' \| 'terminal-debian' \| 'terminal-decoration-error' \| 'terminal-decoration-incomplete' \| 'terminal-decoration-mark' \| 'terminal-decoration-success' \| 'terminal-linux' \| 'terminal-powershell' \| 'terminal-tmux' \| 'terminal-ubuntu' \| 'text-size' \| 'three-bars' \| 'thumbsdown' \| 'thumbsdown-filled' \| 'thumbsup' \| 'thumbsup-filled' \| 'tools' \| 'trash' \| 'trashcan' \| 'triangle-down' \| 'triangle-left' \| 'triangle-right' \| 'triangle-up' \| 'twitter' \| 'type-hierarchy' \| 'type-hierarchy-sub' \| 'type-hierarchy-super' \| 'unfold' \| 'ungroup-by-ref-type' \| 'unlock' \| 'unmute' \| 'unverified' \| 'variable' \| 'variable-group' \| 'verified' \| 'verified-filled' \| 'versions' \| 'vm' \| 'vm-active' \| 'vm-connect' \| 'vm-outline' \| 'vm-running' \| 'vr' \| 'vscode' \| 'vscode-insiders' \| 'wand' \| 'warning' \| 'watch' \| 'whitespace' \| 'whole-word' \| 'window' \| 'word-wrap' \| 'workspace-trusted' \| 'workspace-unknown' \| 'workspace-untrusted' \| 'wrench' \| 'wrench-subaction' \| 'x' \| 'zap' \| 'zoom-in' \| 'zoom-out'
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'span'
disabled If `true`, the component will render with an inactive style.	boolean
isAction If `true`, the icon will render with the style of a clickable button. Note that this style is automatically applied if the icon is configured as a `button` or `a` element via the as prop.	boolean
size Icon size in pixels.	number	16

icon

Type

| 'account'
| 'activate-breakpoints'
| 'add'
| 'alert'
| 'archive'
| 'array'
| 'arrow-both'
| 'arrow-circle-down'
| 'arrow-circle-left'
| 'arrow-circle-right'
| 'arrow-circle-up'
| 'arrow-down'
| 'arrow-left'
| 'arrow-right'
| 'arrow-small-down'
| 'arrow-small-left'
| 'arrow-small-right'
| 'arrow-small-up'
| 'arrow-swap'
| 'arrow-up'
| 'attach'
| 'azure'
| 'azure-devops'
| 'beaker'
| 'beaker-stop'
| 'bell'
| 'bell-dot'
| 'bell-slash'
| 'bell-slash-dot'
| 'blank'
| 'bold'
| 'book'
| 'bookmark'
| 'bracket'
| 'bracket-dot'
| 'bracket-error'
| 'briefcase'
| 'broadcast'
| 'browser'
| 'bug'
| 'calendar'
| 'call-incoming'
| 'call-outgoing'
| 'case-sensitive'
| 'check'
| 'check-all'
| 'checklist'
| 'chevron-down'
| 'chevron-left'
| 'chevron-right'
| 'chevron-up'
| 'chip'
| 'chrome-close'
| 'chrome-maximize'
| 'chrome-minimize'
| 'chrome-restore'
| 'circle'
| 'circle-filled'
| 'circle-large'
| 'circle-large-filled'
| 'circle-large-outline'
| 'circle-outline'
| 'circle-slash'
| 'circle-small'
| 'circle-small-filled'
| 'circuit-board'
| 'clear-all'
| 'clippy'
| 'clock'
| 'clone'
| 'close'
| 'close-all'
| 'close-dirty'
| 'cloud'
| 'cloud-download'
| 'cloud-upload'
| 'code'
| 'code-oss'
| 'code-review'
| 'coffee'
| 'collapse-all'
| 'color-mode'
| 'combine'
| 'comment'
| 'comment-add'
| 'comment-discussion'
| 'comment-draft'
| 'comment-unresolved'
| 'compare-changes'
| 'compass'
| 'compass-active'
| 'compass-dot'
| 'console'
| 'copilot'
| 'copilot-large'
| 'copilot-warning'
| 'copilot-warning-large'
| 'copy'
| 'coverage'
| 'credit-card'
| 'dash'
| 'dashboard'
| 'database'
| 'debug'
| 'debug-all'
| 'debug-alt'
| 'debug-alt-small'
| 'debug-breakpoint'
| 'debug-breakpoint-conditional'
| 'debug-breakpoint-conditional-disabled'
| 'debug-breakpoint-conditional-unverified'
| 'debug-breakpoint-data'
| 'debug-breakpoint-data-disabled'
| 'debug-breakpoint-data-unverified'
| 'debug-breakpoint-disabled'
| 'debug-breakpoint-function'
| 'debug-breakpoint-function-disabled'
| 'debug-breakpoint-function-unverified'
| 'debug-breakpoint-log'
| 'debug-breakpoint-log-disabled'
| 'debug-breakpoint-log-unverified'
| 'debug-breakpoint-unsupported'
| 'debug-breakpoint-unverified'
| 'debug-console'
| 'debug-continue'
| 'debug-continue-small'
| 'debug-coverage'
| 'debug-disconnect'
| 'debug-hint'
| 'debug-line-by-line'
| 'debug-pause'
| 'debug-rerun'
| 'debug-restart'
| 'debug-restart-frame'
| 'debug-reverse-continue'
| 'debug-stackframe'
| 'debug-stackframe-active'
| 'debug-stackframe-dot'
| 'debug-stackframe-focused'
| 'debug-start'
| 'debug-step-back'
| 'debug-step-into'
| 'debug-step-out'
| 'debug-step-over'
| 'debug-stop'
| 'desktop-download'
| 'device-camera'
| 'device-camera-video'
| 'device-desktop'
| 'device-mobile'
| 'diff'
| 'diff-added'
| 'diff-ignored'
| 'diff-modified'
| 'diff-multiple'
| 'diff-removed'
| 'diff-renamed'
| 'diff-sidebyside'
| 'diff-single'
| 'discard'
| 'edit'
| 'edit-session'
| 'editor-layout'
| 'ellipsis'
| 'empty-window'
| 'error'
| 'error-small'
| 'exclude'
| 'expand-all'
| 'export'
| 'extensions'
| 'eye'
| 'eye-closed'
| 'eye-unwatch'
| 'eye-watch'
| 'feedback'
| 'file'
| 'file-add'
| 'file-binary'
| 'file-code'
| 'file-directory'
| 'file-directory-create'
| 'file-media'
| 'file-pdf'
| 'file-submodule'
| 'file-symlink-directory'
| 'file-symlink-file'
| 'file-text'
| 'file-zip'
| 'files'
| 'filter'
| 'filter-filled'
| 'flame'
| 'fold'
| 'fold-down'
| 'fold-horizontal'
| 'fold-horizontal-filled'
| 'fold-up'
| 'fold-vertical'
| 'fold-vertical-filled'
| 'folder'
| 'folder-active'
| 'folder-library'
| 'folder-opened'
| 'game'
| 'gather'
| 'gear'
| 'gift'
| 'gist'
| 'gist-fork'
| 'gist-new'
| 'gist-private'
| 'gist-secret'
| 'git-branch'
| 'git-branch-create'
| 'git-branch-delete'
| 'git-commit'
| 'git-compare'
| 'git-fork-private'
| 'git-merge'
| 'git-pull-request'
| 'git-pull-request-abandoned'
| 'git-pull-request-assignee'
| 'git-pull-request-closed'
| 'git-pull-request-create'
| 'git-pull-request-draft'
| 'git-pull-request-go-to-changes'
| 'git-pull-request-label'
| 'git-pull-request-milestone'
| 'git-pull-request-new-changes'
| 'git-pull-request-reviewer'
| 'git-stash'
| 'git-stash-apply'
| 'git-stash-pop'
| 'github'
| 'github-action'
| 'github-alt'
| 'github-inverted'
| 'github-project'
| 'globe'
| 'go-to-editing-session'
| 'go-to-file'
| 'go-to-search'
| 'grabber'
| 'graph'
| 'graph-left'
| 'graph-line'
| 'graph-scatter'
| 'gripper'
| 'group-by-ref-type'
| 'heart'
| 'heart-filled'
| 'history'
| 'home'
| 'horizontal-rule'
| 'hubot'
| 'inbox'
| 'indent'
| 'info'
| 'insert'
| 'inspect'
| 'issue-closed'
| 'issue-draft'
| 'issue-opened'
| 'issue-reopened'
| 'issues'
| 'italic'
| 'jersey'
| 'json'
| 'kebab-horizontal'
| 'kebab-vertical'
| 'key'
| 'keyboard'
| 'law'
| 'layers'
| 'layers-active'
| 'layers-dot'
| 'layout'
| 'layout-activitybar-left'
| 'layout-activitybar-right'
| 'layout-centered'
| 'layout-menubar'
| 'layout-panel'
| 'layout-panel-center'
| 'layout-panel-justify'
| 'layout-panel-left'
| 'layout-panel-off'
| 'layout-panel-right'
| 'layout-sidebar-left'
| 'layout-sidebar-left-off'
| 'layout-sidebar-right'
| 'layout-sidebar-right-off'
| 'layout-statusbar'
| 'library'
| 'light-bulb'
| 'lightbulb'
| 'lightbulb-autofix'
| 'lightbulb-sparkle'
| 'link'
| 'link-external'
| 'list-filter'
| 'list-flat'
| 'list-ordered'
| 'list-selection'
| 'list-tree'
| 'list-unordered'
| 'live-share'
| 'loading'
| 'location'
| 'lock'
| 'lock-small'
| 'log-in'
| 'log-out'
| 'logo-github'
| 'magnet'
| 'mail'
| 'mail-read'
| 'mail-reply'
| 'map'
| 'map-filled'
| 'map-horizontal'
| 'map-horizontal-filled'
| 'map-vertical'
| 'map-vertical-filled'
| 'mark-github'
| 'markdown'
| 'megaphone'
| 'mention'
| 'menu'
| 'merge'
| 'mic'
| 'mic-filled'
| 'microscope'
| 'milestone'
| 'mirror'
| 'mirror-private'
| 'mirror-public'
| 'more'
| 'mortar-board'
| 'move'
| 'multiple-windows'
| 'music'
| 'mute'
| 'new-file'
| 'new-folder'
| 'newline'
| 'no-newline'
| 'note'
| 'notebook'
| 'notebook-template'
| 'octoface'
| 'open-preview'
| 'organization'
| 'organization-filled'
| 'organization-outline'
| 'output'
| 'package'
| 'paintcan'
| 'pass'
| 'pass-filled'
| 'pencil'
| 'percentage'
| 'person'
| 'person-add'
| 'person-filled'
| 'person-follow'
| 'person-outline'
| 'piano'
| 'pie-chart'
| 'pin'
| 'pinned'
| 'pinned-dirty'
| 'play'
| 'play-circle'
| 'plug'
| 'plus'
| 'preserve-case'
| 'preview'
| 'primitive-dot'
| 'primitive-square'
| 'project'
| 'pulse'
| 'python'
| 'question'
| 'quote'
| 'radio-tower'
| 'reactions'
| 'record'
| 'record-keys'
| 'record-small'
| 'redo'
| 'references'
| 'refresh'
| 'regex'
| 'remote'
| 'remote-explorer'
| 'remove'
| 'remove-close'
| 'repl'
| 'replace'
| 'replace-all'
| 'reply'
| 'repo'
| 'repo-clone'
| 'repo-create'
| 'repo-delete'
| 'repo-fetch'
| 'repo-force-push'
| 'repo-forked'
| 'repo-pull'
| 'repo-push'
| 'repo-sync'
| 'report'
| 'request-changes'
| 'robot'
| 'rocket'
| 'root-folder'
| 'root-folder-opened'
| 'rss'
| 'ruby'
| 'run'
| 'run-above'
| 'run-all'
| 'run-all-coverage'
| 'run-below'
| 'run-coverage'
| 'run-errors'
| 'save'
| 'save-all'
| 'save-as'
| 'screen-full'
| 'screen-normal'
| 'search'
| 'search-fuzzy'
| 'search-save'
| 'search-stop'
| 'selection'
| 'send'
| 'server'
| 'server-environment'
| 'server-process'
| 'settings'
| 'settings-gear'
| 'share'
| 'shield'
| 'sign-in'
| 'sign-out'
| 'smiley'
| 'snake'
| 'sort-percentage'
| 'sort-precedence'
| 'source-control'
| 'sparkle'
| 'sparkle-filled'
| 'split-horizontal'
| 'split-vertical'
| 'squirrel'
| 'star'
| 'star-add'
| 'star-delete'
| 'star-empty'
| 'star-full'
| 'star-half'
| 'stop'
| 'stop-circle'
| 'surround-with'
| 'symbol-array'
| 'symbol-boolean'
| 'symbol-class'
| 'symbol-color'
| 'symbol-constant'
| 'symbol-constructor'
| 'symbol-enum'
| 'symbol-enum-member'
| 'symbol-event'
| 'symbol-field'
| 'symbol-file'
| 'symbol-folder'
| 'symbol-function'
| 'symbol-interface'
| 'symbol-key'
| 'symbol-keyword'
| 'symbol-method'
| 'symbol-misc'
| 'symbol-module'
| 'symbol-namespace'
| 'symbol-null'
| 'symbol-number'
| 'symbol-numeric'
| 'symbol-object'
| 'symbol-operator'
| 'symbol-package'
| 'symbol-parameter'
| 'symbol-property'
| 'symbol-reference'
| 'symbol-ruler'
| 'symbol-snippet'
| 'symbol-string'
| 'symbol-struct'
| 'symbol-structure'
| 'symbol-text'
| 'symbol-type-parameter'
| 'symbol-unit'
| 'symbol-value'
| 'symbol-variable'
| 'sync'
| 'sync-ignored'
| 'table'
| 'tag'
| 'tag-add'
| 'tag-remove'
| 'target'
| 'tasklist'
| 'telescope'
| 'terminal'
| 'terminal-bash'
| 'terminal-cmd'
| 'terminal-debian'
| 'terminal-decoration-error'
| 'terminal-decoration-incomplete'
| 'terminal-decoration-mark'
| 'terminal-decoration-success'
| 'terminal-linux'
| 'terminal-powershell'
| 'terminal-tmux'
| 'terminal-ubuntu'
| 'text-size'
| 'three-bars'
| 'thumbsdown'
| 'thumbsdown-filled'
| 'thumbsup'
| 'thumbsup-filled'
| 'tools'
| 'trash'
| 'trashcan'
| 'triangle-down'
| 'triangle-left'
| 'triangle-right'
| 'triangle-up'
| 'twitter'
| 'type-hierarchy'
| 'type-hierarchy-sub'
| 'type-hierarchy-super'
| 'unfold'
| 'ungroup-by-ref-type'
| 'unlock'
| 'unmute'
| 'unverified'
| 'variable'
| 'variable-group'
| 'verified'
| 'verified-filled'
| 'versions'
| 'vm'
| 'vm-active'
| 'vm-connect'
| 'vm-outline'
| 'vm-running'
| 'vr'
| 'vscode'
| 'vscode-insiders'
| 'wand'
| 'warning'
| 'watch'
| 'whitespace'
| 'whole-word'
| 'window'
| 'word-wrap'
| 'workspace-trusted'
| 'workspace-unknown'
| 'workspace-untrusted'
| 'wrench'
| 'wrench-subaction'
| 'x'
| 'zap'
| 'zoom-in'
| 'zoom-out'

Description

Specifies the codicon name to use.

Type

| ElementType
| ComponentType

Default

'span'

Description

The component used for the root node. It can be a React component or element.

disabled

Type

boolean

Description

If true, the component will render with an inactive style.

isAction

Type

boolean

Description

If true, the icon will render with the style of a clickable button. Note that this style is automatically applied if the icon is configured as a button or a element via the as prop.

size

Type

number

Default

Description

Icon size in pixels.

Field

Icon Button