#
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.
#
Icon list
Currently, there are 325 Octicons supported, including 16 NEW icons.
| Icon | Shortcode | Sample |
|---|---|---|
| accessibility | :icon-accessibility: |
|
| accessibility-inset | :icon-accessibility-inset: |
|
| 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-slash | :icon-bookmark-slash: |
|
| bookmark-slash-fill | :icon-bookmark-slash-fill: |
|
| 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: |
|
| 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-discussion | :icon-comment-discussion: |
|
| commit | :icon-commit: |
|
| 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: |
|
| 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: |
|
| NEW | devices | :icon-devices: |
| diamond | :icon-diamond: |
|
| 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: |
|
| eye | :icon-eye: |
|
| eye-closed | :icon-eye-closed: |
|
| feed-discussion | :icon-feed-discussion: |
|
| feed-forked | :icon-feed-forked: |
|
| feed-heart | :icon-feed-heart: |
|
| NEW | feed-issue-closed | :icon-feed-issue-closed: |
| NEW | feed-issue-draft | :icon-feed-issue-draft: |
| NEW | feed-issue-open | :icon-feed-issue-open: |
| feed-merged | :icon-feed-merged: |
|
| feed-person | :icon-feed-person: |
|
| NEW | feed-plus | :icon-feed-plus: |
| NEW | feed-public | :icon-feed-public: |
| NEW | feed-pull-request-closed | :icon-feed-pull-request-closed: |
| NEW | feed-pull-request-draft | :icon-feed-pull-request-draft: |
| NEW | 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-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: |
|
| NEW | 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: |
|
| fiscal-host | :icon-fiscal-host: |
|
| flame | :icon-flame: |
|
| 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-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: |
|
| 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: |
|
| 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: |
|
:icon-mail: |
||
| mark-github | :icon-mark-github: |
|
| markdown | :icon-markdown: |
|
| megaphone | :icon-megaphone: |
|
| mention | :icon-mention: |
|
| meter | :icon-meter: |
|
| milestone | :icon-milestone: |
|
| 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: |
|
| 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: |
|
| pencil | :icon-pencil: |
|
| people | :icon-people: |
|
| person | :icon-person: |
|
| person-add | :icon-person-add: |
|
| person-fill | :icon-person-fill: |
|
| pin | :icon-pin: |
|
| NEW | pin-slash | :icon-pin-slash: |
| NEW | 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: |
|
| NEW | redo | :icon-redo: |
| rel-file-path | :icon-rel-file-path: |
|
| reply | :icon-reply: |
|
| repo | :icon-repo: |
|
| repo-clone | :icon-repo-clone: |
|
| 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: |
|
| sort-asc | :icon-sort-asc: |
|
| sort-desc | :icon-sort-desc: |
|
| sparkle-fill | :icon-sparkle-fill: |
|
| sponsor-tiers | :icon-sponsor-tiers: |
|
| square | :icon-square: |
|
| 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: |
|
| NEW | tracked-by-closed-completed | :icon-tracked-by-closed-completed: |
| NEW | 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: |
|
| NEW | undo | :icon-undo: |
| unfold | :icon-unfold: |
|
| unlink | :icon-unlink: |
|
| unlock | :icon-unlock: |
|
| unmute | :icon-unmute: |
|
| unread | :icon-unread: |
|
| unverified | :icon-unverified: |
|
| upload | :icon-upload: |
|
| verified | :icon-verified: |
|
| versions | :icon-versions: |
|
| video | :icon-video: |
|
| webhook | :icon-webhook: |
|
| workflow | :icon-workflow: |
|
| 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: |