Octicons

For our icons we use a custom set called Octicons. We then render the icon paths inline using a rails helper to make things easier.

The helper accepts two arguments. The first is the symbol of the icon, and the second is a hash of arguments representing HTML attributes:

  • symbol required

    The symbol is the name of the octicon svg symbol. e.g. "alert"

  • options All of the options are also treated as html elements, placing them on the rendered <svg>

    • :aria-label Icons will be set to aria-hidden="true" unless aria-label is specified. For non-decorative icon usages please pass in a label text.
    • :height When setting the height to a number, the icon will scale to that size. For example, passing 32, will calculate the width based on the icon's natural size.
    • :width When setting the width to a number, the icon will scale to that size. For example, passing 32, will calculate the width based on the icon's natural size.

    When you pass in :width and :height, the icon will be rendered specifically at those dimensions.

Here are some common examples.

<%= octicon("question") %>
<%= octicon("question", :height => 32) %>
<%= octicon("question", :height => 24, :"aria-label" => "Help text", :class => "text-gray float-left") %>

Below you can browse a list of all our octicons.

alert
48
32
16
<%= octicon("alert") %>
archive
48
32
16
<%= octicon("archive") %>
arrow-both
48
32
16
<%= octicon("arrow-both") %>
arrow-down
48
32
16
<%= octicon("arrow-down") %>
arrow-left
48
32
16
<%= octicon("arrow-left") %>
arrow-right
48
32
16
<%= octicon("arrow-right") %>
arrow-small-down
48
32
16
<%= octicon("arrow-small-down") %>
arrow-small-left
48
32
16
<%= octicon("arrow-small-left") %>
arrow-small-right
48
32
16
<%= octicon("arrow-small-right") %>
arrow-small-up
48
32
16
<%= octicon("arrow-small-up") %>
arrow-up
48
32
16
<%= octicon("arrow-up") %>
beaker
48
32
16
<%= octicon("beaker") %>
bell
48
32
16
<%= octicon("bell") %>
bold
48
32
16
<%= octicon("bold") %>
book
48
32
16
<%= octicon("book") %>
bookmark
48
32
16
<%= octicon("bookmark") %>
briefcase
48
32
16
<%= octicon("briefcase") %>
broadcast
48
32
16
<%= octicon("broadcast") %>
browser
48
32
16
<%= octicon("browser") %>
bug
48
32
16
<%= octicon("bug") %>
calendar
48
32
16
<%= octicon("calendar") %>
check
48
32
16
<%= octicon("check") %>
checklist
48
32
16
<%= octicon("checklist") %>
chevron-down
48
32
16
<%= octicon("chevron-down") %>
chevron-left
48
32
16
<%= octicon("chevron-left") %>
chevron-right
48
32
16
<%= octicon("chevron-right") %>
chevron-up
48
32
16
<%= octicon("chevron-up") %>
circle-slash
48
32
16
<%= octicon("circle-slash") %>
circuit-board
48
32
16
<%= octicon("circuit-board") %>
clippy
48
32
16
<%= octicon("clippy") %>
clock
48
32
16
<%= octicon("clock") %>
cloud-download
48
32
16
<%= octicon("cloud-download") %>
cloud-upload
48
32
16
<%= octicon("cloud-upload") %>
code
48
32
16
<%= octicon("code") %>
comment
48
32
16
<%= octicon("comment") %>
comment-discussion
48
32
16
<%= octicon("comment-discussion") %>
credit-card
48
32
16
<%= octicon("credit-card") %>
dash
48
32
16
<%= octicon("dash") %>
dashboard
48
32
16
<%= octicon("dashboard") %>
database
48
32
16
<%= octicon("database") %>
desktop-download
48
32
16
<%= octicon("desktop-download") %>
device-camera
48
32
16
<%= octicon("device-camera") %>
device-camera-video
48
32
16
<%= octicon("device-camera-video") %>
device-desktop
48
32
16
<%= octicon("device-desktop") %>
device-mobile
48
32
16
<%= octicon("device-mobile") %>
diff
48
32
16
<%= octicon("diff") %>
diff-added
48
32
16
<%= octicon("diff-added") %>
diff-ignored
48
32
16
<%= octicon("diff-ignored") %>
diff-modified
48
32
16
<%= octicon("diff-modified") %>
diff-removed
48
32
16
<%= octicon("diff-removed") %>
diff-renamed
48
32
16
<%= octicon("diff-renamed") %>
ellipsis
48
32
16
<%= octicon("ellipsis") %>
eye
48
32
16
<%= octicon("eye") %>
eye-closed
48
32
16
<%= octicon("eye-closed") %>
file
48
32
16
<%= octicon("file") %>
file-binary
48
32
16
<%= octicon("file-binary") %>
file-code
48
32
16
<%= octicon("file-code") %>
file-directory
48
32
16
<%= octicon("file-directory") %>
file-media
48
32
16
<%= octicon("file-media") %>
file-pdf
48
32
16
<%= octicon("file-pdf") %>
file-submodule
48
32
16
<%= octicon("file-submodule") %>
file-symlink-directory
48
32
16
<%= octicon("file-symlink-directory") %>
file-symlink-file
48
32
16
<%= octicon("file-symlink-file") %>
file-zip
48
32
16
<%= octicon("file-zip") %>
flame
48
32
16
<%= octicon("flame") %>
fold
48
32
16
<%= octicon("fold") %>
gear
48
32
16
<%= octicon("gear") %>
gift
48
32
16
<%= octicon("gift") %>
gist
48
32
16
<%= octicon("gist") %>
gist-secret
48
32
16
<%= octicon("gist-secret") %>
git-branch
48
32
16
<%= octicon("git-branch") %>
git-commit
48
32
16
<%= octicon("git-commit") %>
git-compare
48
32
16
<%= octicon("git-compare") %>
git-merge
48
32
16
<%= octicon("git-merge") %>
git-pull-request
48
32
16
<%= octicon("git-pull-request") %>
github-action
48
32
16
<%= octicon("github-action") %>
globe
48
32
16
<%= octicon("globe") %>
grabber
48
32
16
<%= octicon("grabber") %>
graph
48
32
16
<%= octicon("graph") %>
heart
48
32
16
<%= octicon("heart") %>
history
48
32
16
<%= octicon("history") %>
home
48
32
16
<%= octicon("home") %>
horizontal-rule
48
32
16
<%= octicon("horizontal-rule") %>
hubot
48
32
16
<%= octicon("hubot") %>
inbox
48
32
16
<%= octicon("inbox") %>
info
48
32
16
<%= octicon("info") %>
issue-closed
48
32
16
<%= octicon("issue-closed") %>
issue-opened
48
32
16
<%= octicon("issue-opened") %>
issue-reopened
48
32
16
<%= octicon("issue-reopened") %>
italic
48
32
16
<%= octicon("italic") %>
jersey
48
32
16
<%= octicon("jersey") %>
kebab-horizontal
48
32
16
<%= octicon("kebab-horizontal") %>
kebab-vertical
48
32
16
<%= octicon("kebab-vertical") %>
key
48
32
16
<%= octicon("key") %>
keyboard
48
32
16
<%= octicon("keyboard") %>
law
48
32
16
<%= octicon("law") %>
light-bulb
48
32
16
<%= octicon("light-bulb") %>
link
48
32
16
<%= octicon("link") %>
link-external
48
32
16
<%= octicon("link-external") %>
list-ordered
48
32
16
<%= octicon("list-ordered") %>
list-unordered
48
32
16
<%= octicon("list-unordered") %>
location
48
32
16
<%= octicon("location") %>
lock
48
32
16
<%= octicon("lock") %>
logo-gist
48
32
16
<%= octicon("logo-gist") %>
logo-github
48
32
16
<%= octicon("logo-github") %>
mail
48
32
16
<%= octicon("mail") %>
mail-read
48
32
16
<%= octicon("mail-read") %>
mark-github
48
32
16
<%= octicon("mark-github") %>
markdown
48
32
16
<%= octicon("markdown") %>
megaphone
48
32
16
<%= octicon("megaphone") %>
mention
48
32
16
<%= octicon("mention") %>
milestone
48
32
16
<%= octicon("milestone") %>
mirror
48
32
16
<%= octicon("mirror") %>
mortar-board
48
32
16
<%= octicon("mortar-board") %>
mute
48
32
16
<%= octicon("mute") %>
no-newline
48
32
16
<%= octicon("no-newline") %>
note
48
32
16
<%= octicon("note") %>
octoface
48
32
16
<%= octicon("octoface") %>
organization
48
32
16
<%= octicon("organization") %>
package
48
32
16
<%= octicon("package") %>
paintcan
48
32
16
<%= octicon("paintcan") %>
pencil
48
32
16
<%= octicon("pencil") %>
person
48
32
16
<%= octicon("person") %>
pin
48
32
16
<%= octicon("pin") %>
play
48
32
16
<%= octicon("play") %>
plug
48
32
16
<%= octicon("plug") %>
plus
48
32
16
<%= octicon("plus") %>
plus-small
48
32
16
<%= octicon("plus-small") %>
primitive-dot
48
32
16
<%= octicon("primitive-dot") %>
primitive-square
48
32
16
<%= octicon("primitive-square") %>
project
48
32
16
<%= octicon("project") %>
pulse
48
32
16
<%= octicon("pulse") %>
question
48
32
16
<%= octicon("question") %>
quote
48
32
16
<%= octicon("quote") %>
radio-tower
48
32
16
<%= octicon("radio-tower") %>
reply
48
32
16
<%= octicon("reply") %>
repo
48
32
16
<%= octicon("repo") %>
repo-clone
48
32
16
<%= octicon("repo-clone") %>
repo-force-push
48
32
16
<%= octicon("repo-force-push") %>
repo-forked
48
32
16
<%= octicon("repo-forked") %>
repo-pull
48
32
16
<%= octicon("repo-pull") %>
repo-push
48
32
16
<%= octicon("repo-push") %>
report
48
32
16
<%= octicon("report") %>
rocket
48
32
16
<%= octicon("rocket") %>
rss
48
32
16
<%= octicon("rss") %>
ruby
48
32
16
<%= octicon("ruby") %>
screen-full
48
32
16
<%= octicon("screen-full") %>
screen-normal
48
32
16
<%= octicon("screen-normal") %>
search
48
32
16
<%= octicon("search") %>
server
48
32
16
<%= octicon("server") %>
settings
48
32
16
<%= octicon("settings") %>
shield
48
32
16
<%= octicon("shield") %>
sign-in
48
32
16
<%= octicon("sign-in") %>
sign-out
48
32
16
<%= octicon("sign-out") %>
smiley
48
32
16
<%= octicon("smiley") %>
squirrel
48
32
16
<%= octicon("squirrel") %>
star
48
32
16
<%= octicon("star") %>
stop
48
32
16
<%= octicon("stop") %>
sync
48
32
16
<%= octicon("sync") %>
tag
48
32
16
<%= octicon("tag") %>
tasklist
48
32
16
<%= octicon("tasklist") %>
telescope
48
32
16
<%= octicon("telescope") %>
terminal
48
32
16
<%= octicon("terminal") %>
text-size
48
32
16
<%= octicon("text-size") %>
three-bars
48
32
16
<%= octicon("three-bars") %>
thumbsdown
48
32
16
<%= octicon("thumbsdown") %>
thumbsup
48
32
16
<%= octicon("thumbsup") %>
tools
48
32
16
<%= octicon("tools") %>
trashcan
48
32
16
<%= octicon("trashcan") %>
triangle-down
48
32
16
<%= octicon("triangle-down") %>
triangle-left
48
32
16
<%= octicon("triangle-left") %>
triangle-right
48
32
16
<%= octicon("triangle-right") %>
triangle-up
48
32
16
<%= octicon("triangle-up") %>
unfold
48
32
16
<%= octicon("unfold") %>
unmute
48
32
16
<%= octicon("unmute") %>
unverified
48
32
16
<%= octicon("unverified") %>
verified
48
32
16
<%= octicon("verified") %>
versions
48
32
16
<%= octicon("versions") %>
watch
48
32
16
<%= octicon("watch") %>
x
48
32
16
<%= octicon("x") %>
zap
48
32
16
<%= octicon("zap") %>