Product Icon Reference

Visual Studio Code contains a set of built-in icons that are used in views and the editor, but can also be used in hovers, the status bar, and by extensions. These icons are product icons as opposed to file icons, which are used next to file names throughout the UI.

The product icons that ship with VS Code are contained in the Codicon icon font and form the default product icon theme. Extensions can provide new Product Icon Themes to redefine these icons and give VS Code a new appearance.

In order to allow this, all product icons are identified by an ID. The icon identifier is what's used in UI components. The association of icon identifier to an actual icon font glyph is then done in the product icon theme.

Icons in labels

Icons can be used in Markdown labels in hovers, in the StatusBarItem text and QuickPickItem label API. The syntax for adding an icon in Markdown is $(iconIdentifier):

$(alert);

You can also embed text and use multiple icons:

$(eye) $(heart) $(mark-github) GitHub

Animation

You can apply a spinning animation to any icon by appending ~spin to the icon name:

$(sync~spin)

Icon Listing

Below is a listing of the product icons by identifier.

The ID of the icon identifies the location where the icon is used. The default codicon ID describes what icon from codicon library is used by default and the preview shows how that icon looks like.

Product Icon Themes can replace each icon individually as well as all icons from the codicon library.

preview identifier default codicon ID description
accounts-view-bar-icon account Accounts icon in the view bar.
breakpoints-activate activate-breakpoints Icon for the activate action in the breakpoints view.
breakpoints-remove-all close-all Icon for the Remove All action in the breakpoints view.
breakpoints-view-icon debug-alt View icon of the breakpoints view.
callhierarchy-incoming call-incoming Icon for incoming calls in the call hierarchy view.
callhierarchy-outgoing call-outgoing Icon for outgoing calls in the call hierarchy view.
callstack-view-icon debug-alt View icon of the call stack view.
callstack-view-session bug Icon for the session icon in the call stack view.
comments-view-icon comment-discussion View icon of the comments view.
debug-breakpoint debug-breakpoint Icon for breakpoints.
debug-breakpoint-conditional debug-breakpoint-conditional Icon for conditional breakpoints.
debug-breakpoint-conditional-disabled debug-breakpoint-conditional-disabled Icon for disabled conditional breakpoints.
debug-breakpoint-conditional-unverified debug-breakpoint-conditional-unverified Icon for unverified conditional breakpoints.
debug-breakpoint-data debug-breakpoint-data Icon for data breakpoints.
debug-breakpoint-data-disabled debug-breakpoint-data-disabled Icon for disabled data breakpoints.
debug-breakpoint-data-unverified debug-breakpoint-data-unverified Icon for unverified data breakpoints.
debug-breakpoint-disabled debug-breakpoint-disabled Icon for disabled breakpoints.
debug-breakpoint-function debug-breakpoint-function Icon for function breakpoints.
debug-breakpoint-function-disabled debug-breakpoint-function-disabled Icon for disabled function breakpoints.
debug-breakpoint-function-unverified debug-breakpoint-function-unverified Icon for unverified function breakpoints.
debug-breakpoint-log debug-breakpoint-log Icon for log breakpoints.
debug-breakpoint-log-disabled debug-breakpoint-log-disabled Icon for disabled log breakpoint.
debug-breakpoint-log-unverified debug-breakpoint-log-unverified Icon for unverified log breakpoints.
debug-breakpoint-unsupported debug-breakpoint-unsupported Icon for unsupported breakpoints.
debug-breakpoint-unverified debug-breakpoint-unverified Icon for unverified breakpoints.
debug-collapse-all collapse-all Icon for the collapse all action in the debug views.
debug-configure gear Icon for the debug configure action.
debug-console debug-console Icon for the debug console open action.
debug-console-clear-all clear-all Icon for the clear all action in the debug console.
debug-console-evaluation-input arrow-small-right Icon for the debug evaluation input marker.
debug-console-evaluation-prompt chevron-right Icon for the debug evaluation prompt.
debug-console-view-icon debug-console View icon of the debug console view.
debug-continue debug-continue Icon for the debug continue action.
debug-disconnect debug-disconnect Icon for the debug disconnect action.
debug-gripper gripper Icon for the debug bar gripper.
debug-hint debug-hint Icon for breakpoint hints shown on hover in editor glyph margin.
debug-pause debug-pause Icon for the debug pause action.
debug-restart debug-restart Icon for the debug restart action.
debug-restart-frame debug-restart-frame Icon for the debug restart frame action.
debug-reverse-continue debug-reverse-continue Icon for the debug reverse continue action.
debug-stackframe debug-stackframe Icon for a stackframe shown in the editor glyph margin.
debug-stackframe-focused debug-stackframe-focused Icon for a focused stackframe shown in the editor glyph margin.
debug-start debug-start Icon for the debug start action.
debug-step-back debug-step-back Icon for the debug step back action.
debug-step-into debug-step-into Icon for the debug step into action.
debug-step-out debug-step-out Icon for the debug step out action.
debug-step-over debug-step-over Icon for the debug step over action.
debug-stop debug-stop Icon for the debug stop action.
default-view-icon window Default view icon.
diff-editor-next-change arrow-down Icon for the next change action in the diff editor.
diff-editor-previous-change arrow-up Icon for the previous change action in the diff editor.
diff-editor-toggle-whitespace whitespace Icon for the toggle whitespace action in the diff editor.
diff-insert add Line decoration for inserts in the diff editor.
diff-remove remove Line decoration for removals in the diff editor.
diff-review-close close Icon for 'Close' in diff review.
diff-review-insert add Icon for 'Insert' in diff review.
diff-review-remove remove Icon for 'Remove' in diff review.
drop-down-button drop-down-button Icon for drop down buttons.
explorer-view-icon files View icon of the explorer view.
extensions-clear-search-results clear-all Icon for the 'Clear Search Result' action in the extensions view.
extensions-configure-recommended pencil Icon for the 'Configure Recommended Extensions' action in the extensions view.
extensions-filter filter Icon for the 'Filter' action in the extensions view.
extensions-info-message info Icon shown with an info message in the extensions editor.
extensions-install-count cloud-download Icon shown along with the install count in the extensions view and editor.
extensions-install-local-in-remote cloud-download Icon for the 'Install Local Extension in Remote' action in the extensions view.
extensions-install-workspace-recommended cloud-download Icon for the 'Install Workspace Recommended Extensions' action in the extensions view.
extensions-manage gear Icon for the 'Manage' action in the extensions view.
extensions-rating star Icon shown along with the rating in the extensions view and editor.
extensions-refresh refresh Icon for the 'Refresh' action in the extensions view.
extensions-remote remote Icon to indicate that an extension is remote in the extensions view and editor.
extensions-star-empty star-empty Empty star icon used for the rating in the extensions editor.
extensions-star-full star-full Full star icon used for the rating in the extensions editor.
extensions-star-half star-half Half star icon used for the rating in the extensions editor.
extensions-sync-enabled sync Icon to indicate that an extension is synced.
extensions-sync-ignored sync-ignored Icon to indicate that an extension is ignored when syncing.
extensions-view-icon extensions View icon of the extensions view.
extensions-warning-message warning Icon shown with a warning message in the extensions editor.
find-collapsed chevron-right Icon to indicate that the editor find widget is collapsed.
find-expanded chevron-down Icon to indicate that the editor find widget is expanded.
find-next-match arrow-down Icon for 'Find Next' in the editor find widget.
find-previous-match arrow-up Icon for 'Find Previous' in the editor find widget.
find-replace replace Icon for 'Replace' in the editor find widget.
find-replace-all replace-all Icon for 'Replace All' in the editor find widget.
find-selection selection Icon for 'Find in Selection' in the editor find widget.
folding-collapsed chevron-right Icon for collapsed ranges in the editor glyph margin.
folding-expanded chevron-down Icon for expanded ranges in the editor glyph margin.
goto-next-location arrow-down Icon for goto next editor location.
goto-previous-location arrow-up Icon for goto previous editor location.
keybindings-add add Icon for the add action in the keybinding UI.
keybindings-edit edit Icon for the edit action in the keybinding UI.
keybindings-record-keys record-keys Icon for the 'record keys' action in the keybinding UI.
keybindings-sort sort-precedence Icon for the 'sort by precedence' toggle in the keybinding UI.
loaded-scripts-view-icon debug-alt View icon of the loaded scripts view.
marker-navigation-next chevron-down Icon for goto next marker.
marker-navigation-previous chevron-up Icon for goto previous marker.
markers-view-filter filter Icon for the filter configuration in the markers view.
markers-view-icon warning View icon of the markers view.
markers-view-multi-line-collapsed chevron-down Icon indicating that multiple lines are collapsed in the markers view.
markers-view-multi-line-expanded chevron-up Icon indicating that multiple lines are shown in the markers view.
notebook-clear clear-all Icon to clear cell outputs in notebook editors.
notebook-collapsed chevron-right Icon to annotate a collapsed section in notebook editors.
notebook-delete-cell trash Icon to delete a cell in notebook editors.
notebook-edit pencil Icon to edit a cell in notebook editors.
notebook-execute play Icon to execute in notebook editors.
notebook-execute-all run-all Icon to execute all cells in notebook editors.
notebook-expanded chevron-down Icon to annotate an expanded section in notebook editors.
notebook-kernel-configure settings-gear Configure icon in kernel configuration widget in notebook editors.
notebook-kernel-select server-environment Configure icon to select a kernel in notebook editors.
notebook-mimetype code Icon for a mime type in notebook editors.
notebook-move-down arrow-down Icon to move down a cell in notebook editors.
notebook-move-up arrow-up Icon to move up a cell in notebook editors.
notebook-open-as-text file-code Icon to open the notebook in a text editor.
notebook-revert discard Icon to revert in notebook editors.
notebook-split-cell split-vertical Icon to split a cell in notebook editors.
notebook-state-error error Icon to indicate an error state in notebook editors.
notebook-state-success check Icon to indicate a success state in notebook editors.
notebook-stop primitive-square Icon to stop an execution in notebook editors.
notebook-stop-edit check Icon to stop editing a cell in notebook editors.
notebook-unfold unfold Icon to unfold a cell in notebook editors.
notifications-clear close Icon for the clear action in notifications.
notifications-clear-all clear-all Icon for the clear all action in notifications.
notifications-collapse chevron-down Icon for the collapse action in notifications.
notifications-configure gear Icon for the configure action in notifications.
notifications-expand chevron-up Icon for the expand action in notifications.
notifications-hide chevron-down Icon for the hide action in notifications.
outline-view-icon symbol-class View icon of the outline view.
output-view-icon output View icon of the output view.
panel-close close Icon to close a panel.
panel-maximize chevron-up Icon to maximize a panel.
panel-restore chevron-down Icon to restore a panel.
parameter-hints-next chevron-down Icon for show next parameter hint.
parameter-hints-previous chevron-up Icon for show previous parameter hint.
preferences-clear-input clear-all Icon for clear input in the settings and keybinding UI.
preferences-open-settings go-to-file Icon for open settings commands.
quick-input-back arrow-left Icon for the back button in the quick input dialog.
refactor-preview-view-icon lightbulb View icon of the refactor preview view.
remote-explorer-documentation book Documentation icon in the remote explorer view.
remote-explorer-feedback twitter Feedback icon in the remote explorer view.
remote-explorer-get-started star Getting started icon in the remote explorer view.
remote-explorer-report-issues comment Report issue icon in the remote explorer view.
remote-explorer-review-issues issues Review issue icon in the remote explorer view.
remote-explorer-view-icon remote-explorer View icon of the remote explorer view.
review-comment-collapse chevron-up Icon to collapse a review comment.
run-view-icon debug-alt View icon of the run view.
search-clear-results clear-all Icon for clear results in the search view.
search-collapse-results collapse-all Icon for collapse results in the search view.
search-details ellipsis Icon to make search details visible.
search-expand-results expand-all Icon for expand results in the search view.
search-hide-replace chevron-right Icon to collapse the replace section in the search view.
search-new-editor new-file Icon for the action to open a new search editor.
search-refresh refresh Icon for refresh in the search view.
search-remove close Icon to remove a search result.
search-replace replace Icon for replace in the search view.
search-replace-all replace-all Icon for replace all in the search view.
search-show-context list-selection Icon for toggle the context in the search editor.
search-show-replace chevron-down Icon to expand the replace section in the search view.
search-stop search-stop Icon for stop in the search view.
search-view-icon search View icon of the search view.
settings-add add Icon for the add action in the settings UI.
settings-discard discard Icon for the discard action in the settings UI.
settings-edit edit Icon for the edit action in the settings UI.
settings-folder-dropdown triangle-down Icon for the folder dropdown button in the split JSON settings editor.
settings-group-collapsed chevron-right Icon for a collapsed section in the split JSON Settings editor.
settings-group-expanded chevron-down Icon for an expanded section in the split JSON Settings editor.
settings-more-action gear Icon for the 'more actions' action in the Settings UI.
settings-remove close Icon for the remove action in the Settings UI.
settings-sync-view-icon sync View icon of the Settings Sync view.
settings-view-bar-icon settings-gear Settings icon in the view bar.
source-control-view-icon source-control View icon of the Source Control view.
suggest-more-info chevron-right Icon for more information in the suggest widget.
tasks-list-configure gear Configuration icon in the tasks selection list.
tasks-remove close Icon for remove in the tasks selection list.
terminal-kill trash Icon for killing a terminal instance.
terminal-new add Icon for creating a new terminal instance.
terminal-rename gear Icon for rename in the terminal quick menu.
terminal-view-icon terminal View icon of the terminal view.
test-view-icon beaker View icon of the test view.
timeline-open history Icon for the open timeline action.
timeline-pin pin Icon for the pin timeline action.
timeline-refresh refresh Icon for the refresh timeline action.
timeline-unpin pinned Icon for the unpin timeline action.
timeline-view-icon history View icon of the timeline view.
variables-view-icon debug-alt View icon of the variables view.
view-pane-container-collapsed chevron-right Icon for a collapsed view pane container.
view-pane-container-expanded chevron-down Icon for an expanded view pane container.
watch-expressions-add add Icon for the add action in the watch view.
watch-expressions-add-function-breakpoint add Icon for the add function breakpoint action in the watch view.
watch-expressions-remove-all close-all Icon for the Remove All action in the watch view.
watch-view-icon debug-alt View icon of the watch view.
widget-close close Icon for the close action in widgets.

The Codicon library contains all the icons used in VS Code views as well as a set of useful icons.

VS Code extensions can use these icons in labels, views, and trees.

preview identifier
account
activate-breakpoints
add
alert
archive
array
arrow-both
arrow-down
arrow-left
arrow-right
arrow-small-down
arrow-small-left
arrow-small-right
arrow-small-up
arrow-up
beaker
bell-dot
bell
bold
book
bookmark
briefcase
broadcast
browser
bug
calendar
call-incoming
call-outgoing
case-sensitive
check-all
check
checklist
chevron-down
chevron-left
chevron-right
chevron-up
chrome-close
chrome-maximize
chrome-minimize
chrome-restore
circle-filled
circle-large-filled
circle-large-outline
circle-outline
circle-slash
circuit-board
clear-all
clippy
clock
clone
close-all
close-dirty
close
cloud-download
cloud-upload
cloud
code
collapse-all
color-mode
comment-add
comment-discussion
comment
compare-changes
console
credit-card
dash
dashboard
database
debug-alt-small
debug-alt
debug-breakpoint-conditional-disabled
debug-breakpoint-conditional-unverified
debug-breakpoint-conditional
debug-breakpoint-data-disabled
debug-breakpoint-data-unverified
debug-breakpoint-data
debug-breakpoint-disabled
debug-breakpoint-function-disabled
debug-breakpoint-function-unverified
debug-breakpoint-function
debug-breakpoint-log-disabled
debug-breakpoint-log-unverified
debug-breakpoint-log
debug-breakpoint-unsupported
debug-breakpoint-unverified
debug-breakpoint
debug-console
debug-continue
debug-disconnect
debug-hint
debug-pause
debug-restart-frame
debug-restart
debug-reverse-continue
debug-stackframe-active
debug-stackframe-dot
debug-stackframe-focused
debug-stackframe
debug-start
debug-step-back
debug-step-into
debug-step-out
debug-step-over
debug-stop
debug
desktop-download
device-camera-video
device-camera
device-desktop
device-mobile
diff-added
diff-ignored
diff-modified
diff-removed
diff-renamed
diff
discard
edit
editor-layout
ellipsis
empty-window
error
exclude
expand-all
export
extensions
eye-closed
eye-unwatch
eye-watch
eye
feedback
file-add
file-binary
file-code
file-directory-create
file-directory
file-media
file-pdf
file-submodule
file-symlink-directory
file-symlink-file
file-text
file-zip
file
files
filter
flame
fold-down
fold-up
fold
folder-active
folder-opened
folder
gear
gift
gist-fork
gist-new
gist-private
gist-secret
gist
git-branch-create
git-branch-delete
git-branch
git-commit
git-compare
git-fork-private
git-merge
git-pull-request-abandoned
git-pull-request
github-action
github-alt
github-inverted
github
globe
go-to-file
grabber
graph-left
graph
gripper
group-by-ref-type
heart
history
home
horizontal-rule
hubot
inbox
info
issue-closed
issue-opened
issue-reopened
issues
italic
jersey
json
kebab-horizontal
kebab-vertical
key
keyboard
law
library
light-bulb
lightbulb-autofix
lightbulb
link-external
link
list-filter
list-flat
list-ordered
list-selection
list-tree
list-unordered
live-share
loading
location
lock
log-in
log-out
logo-github
magnet
mail-read
mail-reply
mail
mark-github
markdown
megaphone
mention
menu
merge
microscope
milestone
mirror-private
mirror-public
mirror
more
mortar-board
move
multiple-windows
mute
new-file
new-folder
no-newline
note
notebook
octoface
open-preview
organization-filled
organization-outline
organization
output
package
paintcan
pass-filled
pass
pencil
person-add
person-filled
person-follow
person-outline
person
pin
pinned-dirty
pinned
play-circle
play
plug
plus
preserve-case
preview
primitive-dot
primitive-square
project
pulse
question
quote
radio-tower
reactions
record-keys
record
redo
references
refresh
regex
remote-explorer
remote
remove-close
remove
repl
replace-all
replace
reply
repo-clone
repo-create
repo-delete
repo-force-push
repo-forked
repo-pull
repo-push
repo-sync
repo
report
request-changes
rocket
root-folder-opened
root-folder
rss
ruby
run-all
run
save-all
save-as
save
screen-full
screen-normal
search-save
search-stop
search
selection
server-environment
server-process
server
settings-gear
settings
shield
sign-in
sign-out
smiley
sort-precedence
source-control
split-horizontal
split-vertical
squirrel
star-add
star-delete
star-empty
star-full
star-half
star
stop-circle
stop
symbol-array
symbol-boolean
symbol-class
symbol-color
symbol-constant
symbol-constructor
symbol-enum-member
symbol-enum
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-ignored
sync
tag-add
tag-remove
tag
tasklist
telescope
terminal
text-size
three-bars
thumbsdown
thumbsup
tools
trash
trashcan
triangle-down
triangle-left
triangle-right
triangle-up
twitter
unfold
ungroup-by-ref-type
unlock
unmute
unverified
variable
verified
versions
vm-active
vm-connect
vm-outline
vm-running
vm
warning
watch
whitespace
whole-word
window
word-wrap
wrench-subaction
wrench
x
zap
zoom-in
zoom-out