# Octicons

Octicons can be used with the Icon component and several other components, including the Badge and Button.

# Samples

# Component

For the Icon component, the icon is specified using the syntax :icon-shortcode:, where shortcode is the name of the icon (found in the table below).

For example, use the code :icon-rocket: for a icon.

When an icon is used in other components, the icon is referred to by only the shortcode.

For example, the following demonstrates using the icon in a Badge and a Button.

Component	Sample
rocket	`[!badge icon="rocket" text="rocket"]`
	`[!button icon="rocket" text="rocket"]`

# Metadata

When an icon is specified within the Page or Project metadata, the icon can be referred to by only its shortcode.

The following sample demonstrates setting a Page icon to a .

---
icon: rocket
---
# Sample

This is a sample page with a :icon-rocket: icon.

# New icons

The following NEW icons are included in Retype v4.2.0-preview:

Icon	Shortcode	Sample
	agent	`:icon-agent:`
	boolean-off	`:icon-boolean-off:`
	boolean-on	`:icon-boolean-on:`
	checkbox-fill	`:icon-checkbox-fill:`
	comment-ai	`:icon-comment-ai:`
	compose	`:icon-compose:`
	crosshairs	`:icon-crosshairs:`
	dice	`:icon-dice:`
	exclamation	`:icon-exclamation:`
	file-check	`:icon-file-check:`
	flowchart	`:icon-flowchart:`
	focus-center	`:icon-focus-center:`
	git-branch-check	`:icon-git-branch-check:`
	graph-bar-horizontal	`:icon-graph-bar-horizontal:`
	graph-bar-vertical	`:icon-graph-bar-vertical:`
	inbox-fill	`:icon-inbox-fill:`
	maximize	`:icon-maximize:`
	mcp	`:icon-mcp:`
	minimize	`:icon-minimize:`
	node	`:icon-node:`
	pencil-ai	`:icon-pencil-ai:`
	smiley-frown	`:icon-smiley-frown:`
	smiley-frustrated	`:icon-smiley-frustrated:`
	smiley-grin	`:icon-smiley-grin:`
	smiley-neutral	`:icon-smiley-neutral:`
	space	`:icon-space:`
	spacing-large	`:icon-spacing-large:`
	spacing-medium	`:icon-spacing-medium:`
	spacing-small	`:icon-spacing-small:`
	split-view	`:icon-split-view:`
	unwrap	`:icon-unwrap:`
	vscode	`:icon-vscode:`
	wrap	`:icon-wrap:`

# All icons

As of v4.2.0-preview, there are 367 Octicons supported and more being added with each new release.

Icon	Shortcode	Sample
	accessibility	`:icon-accessibility:`
	accessibility-inset	`:icon-accessibility-inset:`
	agent	`:icon-agent:`
	ai-model	`:icon-ai-model:`
	alert	`:icon-alert:`
	alert-fill	`:icon-alert-fill:`
	apps	`:icon-apps:`
	archive	`:icon-archive:`
	arrow-both	`:icon-arrow-both:`
	arrow-down	`:icon-arrow-down:`
	arrow-down-left	`:icon-arrow-down-left:`
	arrow-down-right	`:icon-arrow-down-right:`
	arrow-left	`:icon-arrow-left:`
	arrow-right	`:icon-arrow-right:`
	arrow-switch	`:icon-arrow-switch:`
	arrow-up	`:icon-arrow-up:`
	arrow-up-left	`:icon-arrow-up-left:`
	arrow-up-right	`:icon-arrow-up-right:`
	beaker	`:icon-beaker:`
	bell	`:icon-bell:`
	bell-fill	`:icon-bell-fill:`
	bell-slash	`:icon-bell-slash:`
	blocked	`:icon-blocked:`
	bold	`:icon-bold:`
	book	`:icon-book:`
	bookmark	`:icon-bookmark:`
	bookmark-fill	`:icon-bookmark-fill:`
	bookmark-filled	`:icon-bookmark-filled:`
	bookmark-slash	`:icon-bookmark-slash:`
	bookmark-slash-fill	`:icon-bookmark-slash-fill:`
	boolean-off	`:icon-boolean-off:`
	boolean-on	`:icon-boolean-on:`
	briefcase	`:icon-briefcase:`
	broadcast	`:icon-broadcast:`
	browser	`:icon-browser:`
	bug	`:icon-bug:`
	cache	`:icon-cache:`
	calendar	`:icon-calendar:`
	check	`:icon-check:`
	check-circle	`:icon-check-circle:`
	check-circle-fill	`:icon-check-circle-fill:`
	checkbox	`:icon-checkbox:`
	checkbox-fill	`:icon-checkbox-fill:`
	checklist	`:icon-checklist:`
	chevron-down	`:icon-chevron-down:`
	chevron-left	`:icon-chevron-left:`
	chevron-right	`:icon-chevron-right:`
	chevron-up	`:icon-chevron-up:`
	circle	`:icon-circle:`
	circle-slash	`:icon-circle-slash:`
	clock	`:icon-clock:`
	clock-fill	`:icon-clock-fill:`
	cloud	`:icon-cloud:`
	cloud-offline	`:icon-cloud-offline:`
	code	`:icon-code:`
	code-of-conduct	`:icon-code-of-conduct:`
	code-review	`:icon-code-review:`
	code-square	`:icon-code-square:`
	codescan	`:icon-codescan:`
	codescan-checkmark	`:icon-codescan-checkmark:`
	codespaces	`:icon-codespaces:`
	columns	`:icon-columns:`
	command-palette	`:icon-command-palette:`
	comment	`:icon-comment:`
	comment-ai	`:icon-comment-ai:`
	comment-discussion	`:icon-comment-discussion:`
	compose	`:icon-compose:`
	container	`:icon-container:`
	copilot	`:icon-copilot:`
	copilot-error	`:icon-copilot-error:`
	copilot-warning	`:icon-copilot-warning:`
	copy	`:icon-copy:`
	cpu	`:icon-cpu:`
	credit-card	`:icon-credit-card:`
	cross-reference	`:icon-cross-reference:`
	crosshairs	`:icon-crosshairs:`
	dash	`:icon-dash:`
	database	`:icon-database:`
	dependabot	`:icon-dependabot:`
	desktop-download	`:icon-desktop-download:`
	device-camera	`:icon-device-camera:`
	device-camera-video	`:icon-device-camera-video:`
	device-desktop	`:icon-device-desktop:`
	device-mobile	`:icon-device-mobile:`
	devices	`:icon-devices:`
	diamond	`:icon-diamond:`
	dice	`:icon-dice:`
	diff	`:icon-diff:`
	diff-added	`:icon-diff-added:`
	diff-ignored	`:icon-diff-ignored:`
	diff-modified	`:icon-diff-modified:`
	diff-removed	`:icon-diff-removed:`
	diff-renamed	`:icon-diff-renamed:`
	discussion-closed	`:icon-discussion-closed:`
	discussion-duplicate	`:icon-discussion-duplicate:`
	discussion-outdated	`:icon-discussion-outdated:`
	dot	`:icon-dot:`
	dot-fill	`:icon-dot-fill:`
	download	`:icon-download:`
	duplicate	`:icon-duplicate:`
	ellipsis	`:icon-ellipsis:`
	exclamation	`:icon-exclamation:`
	eye	`:icon-eye:`
	eye-closed	`:icon-eye-closed:`
	feed-discussion	`:icon-feed-discussion:`
	feed-forked	`:icon-feed-forked:`
	feed-heart	`:icon-feed-heart:`
	feed-issue-closed	`:icon-feed-issue-closed:`
	feed-issue-draft	`:icon-feed-issue-draft:`
	feed-issue-open	`:icon-feed-issue-open:`
	feed-issue-reopen	`:icon-feed-issue-reopen:`
	feed-merged	`:icon-feed-merged:`
	feed-person	`:icon-feed-person:`
	feed-plus	`:icon-feed-plus:`
	feed-public	`:icon-feed-public:`
	feed-pull-request-closed	`:icon-feed-pull-request-closed:`
	feed-pull-request-draft	`:icon-feed-pull-request-draft:`
	feed-pull-request-open	`:icon-feed-pull-request-open:`
	feed-repo	`:icon-feed-repo:`
	feed-rocket	`:icon-feed-rocket:`
	feed-star	`:icon-feed-star:`
	feed-tag	`:icon-feed-tag:`
	feed-trophy	`:icon-feed-trophy:`
	file	`:icon-file:`
	file-added	`:icon-file-added:`
	file-badge	`:icon-file-badge:`
	file-binary	`:icon-file-binary:`
	file-check	`:icon-file-check:`
	file-code	`:icon-file-code:`
	file-diff	`:icon-file-diff:`
	file-directory	`:icon-file-directory:`
	file-directory-fill	`:icon-file-directory-fill:`
	file-directory-open-fill	`:icon-file-directory-open-fill:`
	file-directory-symlink	`:icon-file-directory-symlink:`
	file-media	`:icon-file-media:`
	file-moved	`:icon-file-moved:`
	file-removed	`:icon-file-removed:`
	file-submodule	`:icon-file-submodule:`
	file-symlink-file	`:icon-file-symlink-file:`
	file-zip	`:icon-file-zip:`
	filter	`:icon-filter:`
	filter-remove	`:icon-filter-remove:`
	fiscal-host	`:icon-fiscal-host:`
	flame	`:icon-flame:`
	flowchart	`:icon-flowchart:`
	focus-center	`:icon-focus-center:`
	fold	`:icon-fold:`
	fold-down	`:icon-fold-down:`
	fold-up	`:icon-fold-up:`
	gear	`:icon-gear:`
	gift	`:icon-gift:`
	git-branch	`:icon-git-branch:`
	git-branch-check	`:icon-git-branch-check:`
	git-commit	`:icon-git-commit:`
	git-compare	`:icon-git-compare:`
	git-merge	`:icon-git-merge:`
	git-merge-queue	`:icon-git-merge-queue:`
	git-pull-request	`:icon-git-pull-request:`
	git-pull-request-closed	`:icon-git-pull-request-closed:`
	git-pull-request-draft	`:icon-git-pull-request-draft:`
	globe	`:icon-globe:`
	goal	`:icon-goal:`
	grabber	`:icon-grabber:`
	graph	`:icon-graph:`
	graph-bar-horizontal	`:icon-graph-bar-horizontal:`
	graph-bar-vertical	`:icon-graph-bar-vertical:`
	hash	`:icon-hash:`
	heading	`:icon-heading:`
	heart	`:icon-heart:`
	heart-fill	`:icon-heart-fill:`
	history	`:icon-history:`
	home	`:icon-home:`
	home-fill	`:icon-home-fill:`
	horizontal-rule	`:icon-horizontal-rule:`
	hourglass	`:icon-hourglass:`
	hubot	`:icon-hubot:`
	id-badge	`:icon-id-badge:`
	image	`:icon-image:`
	inbox	`:icon-inbox:`
	inbox-fill	`:icon-inbox-fill:`
	infinity	`:icon-infinity:`
	info	`:icon-info:`
	issue-closed	`:icon-issue-closed:`
	issue-draft	`:icon-issue-draft:`
	issue-opened	`:icon-issue-opened:`
	issue-reopened	`:icon-issue-reopened:`
	issue-tracked-by	`:icon-issue-tracked-by:`
	issue-tracks	`:icon-issue-tracks:`
	italic	`:icon-italic:`
	iterations	`:icon-iterations:`
	kebab-horizontal	`:icon-kebab-horizontal:`
	key	`:icon-key:`
	key-asterisk	`:icon-key-asterisk:`
	law	`:icon-law:`
	light-bulb	`:icon-light-bulb:`
	link	`:icon-link:`
	link-external	`:icon-link-external:`
	list-ordered	`:icon-list-ordered:`
	list-unordered	`:icon-list-unordered:`
	location	`:icon-location:`
	lock	`:icon-lock:`
	log	`:icon-log:`
	logo-gist	`:icon-logo-gist:`
	logo-github	`:icon-logo-github:`
	loop	`:icon-loop:`
	mail	`:icon-mail:`
	mark-github	`:icon-mark-github:`
	markdown	`:icon-markdown:`
	maximize	`:icon-maximize:`
	mcp	`:icon-mcp:`
	megaphone	`:icon-megaphone:`
	mention	`:icon-mention:`
	meter	`:icon-meter:`
	milestone	`:icon-milestone:`
	minimize	`:icon-minimize:`
	mirror	`:icon-mirror:`
	moon	`:icon-moon:`
	mortar-board	`:icon-mortar-board:`
	move-to-bottom	`:icon-move-to-bottom:`
	move-to-end	`:icon-move-to-end:`
	move-to-start	`:icon-move-to-start:`
	move-to-top	`:icon-move-to-top:`
	multi-select	`:icon-multi-select:`
	mute	`:icon-mute:`
	no-entry	`:icon-no-entry:`
	node	`:icon-node:`
	north-star	`:icon-north-star:`
	note	`:icon-note:`
	number	`:icon-number:`
	organization	`:icon-organization:`
	package	`:icon-package:`
	package-dependencies	`:icon-package-dependencies:`
	package-dependents	`:icon-package-dependents:`
	paintbrush	`:icon-paintbrush:`
	paper-airplane	`:icon-paper-airplane:`
	paperclip	`:icon-paperclip:`
	passkey-fill	`:icon-passkey-fill:`
	paste	`:icon-paste:`
	pause	`:icon-pause:`
	pencil	`:icon-pencil:`
	pencil-ai	`:icon-pencil-ai:`
	people	`:icon-people:`
	person	`:icon-person:`
	person-add	`:icon-person-add:`
	person-fill	`:icon-person-fill:`
	pin	`:icon-pin:`
	pin-slash	`:icon-pin-slash:`
	pivot-column	`:icon-pivot-column:`
	play	`:icon-play:`
	plug	`:icon-plug:`
	plus	`:icon-plus:`
	plus-circle	`:icon-plus-circle:`
	project	`:icon-project:`
	project-roadmap	`:icon-project-roadmap:`
	project-symlink	`:icon-project-symlink:`
	project-template	`:icon-project-template:`
	pulse	`:icon-pulse:`
	question	`:icon-question:`
	quote	`:icon-quote:`
	read	`:icon-read:`
	redo	`:icon-redo:`
	rel-file-path	`:icon-rel-file-path:`
	reply	`:icon-reply:`
	repo	`:icon-repo:`
	repo-clone	`:icon-repo-clone:`
	repo-delete	`:icon-repo-delete:`
	repo-deleted	`:icon-repo-deleted:`
	repo-forked	`:icon-repo-forked:`
	repo-locked	`:icon-repo-locked:`
	repo-pull	`:icon-repo-pull:`
	repo-push	`:icon-repo-push:`
	repo-template	`:icon-repo-template:`
	report	`:icon-report:`
	rocket	`:icon-rocket:`
	rows	`:icon-rows:`
	rss	`:icon-rss:`
	ruby	`:icon-ruby:`
	screen-full	`:icon-screen-full:`
	screen-normal	`:icon-screen-normal:`
	search	`:icon-search:`
	server	`:icon-server:`
	share	`:icon-share:`
	share-android	`:icon-share-android:`
	shield	`:icon-shield:`
	shield-check	`:icon-shield-check:`
	shield-lock	`:icon-shield-lock:`
	shield-slash	`:icon-shield-slash:`
	shield-x	`:icon-shield-x:`
	sidebar-collapse	`:icon-sidebar-collapse:`
	sidebar-expand	`:icon-sidebar-expand:`
	sign-in	`:icon-sign-in:`
	sign-out	`:icon-sign-out:`
	single-select	`:icon-single-select:`
	skip	`:icon-skip:`
	skip-fill	`:icon-skip-fill:`
	sliders	`:icon-sliders:`
	smiley	`:icon-smiley:`
	smiley-frown	`:icon-smiley-frown:`
	smiley-frustrated	`:icon-smiley-frustrated:`
	smiley-grin	`:icon-smiley-grin:`
	smiley-neutral	`:icon-smiley-neutral:`
	sort-asc	`:icon-sort-asc:`
	sort-desc	`:icon-sort-desc:`
	space	`:icon-space:`
	spacing-large	`:icon-spacing-large:`
	spacing-medium	`:icon-spacing-medium:`
	spacing-small	`:icon-spacing-small:`
	sparkle	`:icon-sparkle:`
	sparkle-fill	`:icon-sparkle-fill:`
	sparkles-fill	`:icon-sparkles-fill:`
	split-view	`:icon-split-view:`
	sponsor-tiers	`:icon-sponsor-tiers:`
	square	`:icon-square:`
	square-circle	`:icon-square-circle:`
	square-fill	`:icon-square-fill:`
	squirrel	`:icon-squirrel:`
	stack	`:icon-stack:`
	star	`:icon-star:`
	star-fill	`:icon-star-fill:`
	stop	`:icon-stop:`
	stopwatch	`:icon-stopwatch:`
	strikethrough	`:icon-strikethrough:`
	sun	`:icon-sun:`
	sync	`:icon-sync:`
	tab	`:icon-tab:`
	tab-external	`:icon-tab-external:`
	table	`:icon-table:`
	tag	`:icon-tag:`
	tasklist	`:icon-tasklist:`
	telescope	`:icon-telescope:`
	telescope-fill	`:icon-telescope-fill:`
	terminal	`:icon-terminal:`
	three-bars	`:icon-three-bars:`
	thumbsdown	`:icon-thumbsdown:`
	thumbsup	`:icon-thumbsup:`
	tools	`:icon-tools:`
	tracked-by-closed-completed	`:icon-tracked-by-closed-completed:`
	tracked-by-closed-not-planned	`:icon-tracked-by-closed-not-planned:`
	trash	`:icon-trash:`
	triangle-down	`:icon-triangle-down:`
	triangle-left	`:icon-triangle-left:`
	triangle-right	`:icon-triangle-right:`
	triangle-up	`:icon-triangle-up:`
	trophy	`:icon-trophy:`
	typography	`:icon-typography:`
	undo	`:icon-undo:`
	unfold	`:icon-unfold:`
	unlink	`:icon-unlink:`
	unlock	`:icon-unlock:`
	unmute	`:icon-unmute:`
	unread	`:icon-unread:`
	unverified	`:icon-unverified:`
	unwrap	`:icon-unwrap:`
	upload	`:icon-upload:`
	verified	`:icon-verified:`
	versions	`:icon-versions:`
	video	`:icon-video:`
	vscode	`:icon-vscode:`
	webhook	`:icon-webhook:`
	workflow	`:icon-workflow:`
	wrap	`:icon-wrap:`
	x	`:icon-x:`
	x-circle	`:icon-x-circle:`
	x-circle-fill	`:icon-x-circle-fill:`
	zap	`:icon-zap:`
	zoom-in	`:icon-zoom-in:`
	zoom-out	`:icon-zoom-out:`