A scalable set of icons handcrafted with <3 by GitHub
MIT License
Bot releases are hidden (Show)
Published by ashygee over 3 years ago
key-asterisk-16
https://github.com/primer/octicons/pull/623
Published by colebemis over 3 years ago
git-pull-request-draft
https://github.com/primer/octicons/pull/613
git-pull-request-closed
https://github.com/primer/octicons/pull/613
Published by colebemis over 3 years ago
octoface
https://github.com/primer/octicons/pull/611
git-fork-24
to repo-forked-24
https://github.com/primer/octicons/pull/593
number
https://github.com/primer/octicons/pull/592
hash
(previously number
) https://github.com/primer/octicons/pull/592
diamond
https://github.com/primer/octicons/pull/616
single-select
https://github.com/primer/octicons/pull/612
rows
https://github.com/primer/octicons/pull/617
columns
https://github.com/primer/octicons/pull/617
issue-draft
https://github.com/primer/octicons/pull/614
issue-opened
https://github.com/primer/octicons/pull/614
issue-closed
https://github.com/primer/octicons/pull/614
arrow-up
icon https://github.com/primer/octicons/pull/594
overflow: visible
https://github.com/primer/octicons/pull/607
Published by colebemis over 3 years ago
table
https://github.com/primer/octicons/pull/564
person-add
https://github.com/primer/octicons/pull/573
blocked
https://github.com/primer/octicons/pull/576
duplicate
https://github.com/primer/octicons/pull/576
dependabot
https://github.com/primer/octicons/pull/585
codescan
https://github.com/primer/octicons/pull/588
browser
https://github.com/primer/octicons/pull/575
sidebar
icons https://github.com/primer/octicons/pull/569
codespaces
https://github.com/primer/octicons/pull/587
insights
icon https://github.com/primer/octicons/pull/574
copy
icon https://github.com/primer/octicons/pull/586
megaphone-16
https://github.com/primer/octicons/pull/554
circle
icon https://github.com/primer/octicons/pull/584
Published by colebemis over 3 years ago
fill
prop to each icon component https://github.com/primer/octicons/pull/551 @macnoPublished by edokoa over 3 years ago
bug
(https://github.com/primer/octicons/pull/543)multi-select
(https://github.com/primer/octicons/pull/534)trashcan
icon to trash
(@fermion π) (https://github.com/primer/octicons/pull/538)Published by emplums over 3 years ago
number
(https://github.com/primer/octicons/pull/541)video
(https://github.com/primer/octicons/pull/540)Published by ashygee almost 4 years ago
strikethrough
(https://github.com/primer/octicons/pull/518)plus
and dash
icon (https://github.com/primer/octicons/pull/447)Published by ashygee almost 4 years ago
container
(https://github.com/primer/octicons/pull/507)squirrel
24px icon (https://github.com/primer/octicons/pull/508)smiley
(https://github.com/primer/octicons/pull/509)Published by colebemis about 4 years ago
unverifed-24.svg
β unverified-24.svg
file-symlink-24.svg
β file-symlink-file-24.svg
fire-24.svg
β flame-24.svg
eye-slash-24.svg
β eye-closed-24.svg
settings
icon. Use gear
instead https://github.com/primer/octicons/pull/493
Published by colebemis over 4 years ago
v9.x | v10.0 | Notes |
---|---|---|
arrow-small-down |
arrow-down |
|
arrow-small-left |
arrow-left |
|
arrow-small-right |
arrow-right |
|
arrow-small-up |
arrow-up |
|
circuit-board |
cpu |
|
cloud-download |
download |
|
cloud-upload |
upload |
|
dashboard |
meter |
|
dependent |
package-dependents |
|
file-pdf |
file |
|
file-symlink-directory |
file-submodule |
|
gist-secret |
lock |
|
gist |
code-square |
|
github-action |
play |
|
heart-outline |
heart |
|
internal-repo |
repo |
|
jersey |
people |
|
keyboard |
Request this icon | |
line-arrow-down |
arrow-down |
|
line-arrow-left |
arrow-left |
|
line-arrow-right |
arrow-right |
|
line-arrow-up |
arrow-up |
|
mail-read |
mail |
|
no-newline |
no-entry |
|
paintcan |
paintbrush |
|
plus-small |
plus |
|
primitive-dot-stroke |
dot |
|
primitive-dot |
dot-fill |
|
primitive-square |
square-fill |
|
radio-tower |
broadcast |
|
repo-force-push |
repo-push |
|
repo-template-private |
Request this icon | |
request-changes |
diff |
|
saved |
bookmark |
|
text-size |
heading or typography
|
|
unsaved |
bookmark-slash |
|
watch |
hourglass |
|
workflow-all |
Request this icon |
Icon components (e.g. AlertIcon
, ArrowRightIcon
, etc.) now accept size
, ariaLabel
, verticalAlign
, and className
props and can be used on their own. No need to pass them to the Octicon
component.
<AlertIcon size={24} />
Icon components will now choose the best SVG icon to render based on the size
passed in.
The Octicon
component is deprecated. Use icon components on their own instead:
- <Octicon icon={AlertIcon} />
+ <AlertIcon />
All icon component names now include Icon
at the end (e.g. Alert
β AlertIcon
).
In order to enable tree-shaking, we removed the iconsByName
and getIconByName
exports.
Octicon
no longer accepts width
or height
props. Use the size
prop instead. In cases where the width and height of an icon are not equal (e.g. logos), the height will be set to the value of the size
prop and the width
will be scaled proportionally.
We renamed the ariaLabel
prop to aria-label
to be consistent with React: https://reactjs.org/docs/accessibility.html#wai-aria
- <AlertIcon ariaLabel="alert">
+ <AlertIcon aria-label="alert">
Setting verticalAlign="top"
on the Octicon
component or any icon component will now apply a vertical-align: top;
style to the <svg>
. Previously, we were translating "top" to "text-top." So setting verticalAlign="top"
would apply a vertical-align: text-top;
style to the <svg>
. If you want a vertical alignment of "text-top," set the verticalAlign
prop to "text-top"
.
Custom icon components passed to the Octicon
component now need to render the entire <svg>
, not just the <path>
.
function CirclesIcon() {
return (
- <React.Fragment>
+ <svg viewBox="0 0 30 10" width="30" height="10">
<circle r={5} cx={5} cy={5}/>
<circle r={5} cx={15} cy={5}/>
<circle r={5} cx={25} cy={5}/>
- </React.Fragment>
+ </svg>
)
}
- CirclesIcon.size = [30, 10]
octicons.alert
// {
// symbol: 'alert',
// keywords: ['warning', 'triangle', 'exclamation', 'point'],
// toSVG: [Function],
// width: 16,
// height: 16,
// path: '<path d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/>',
// options: {
// version: '1.1',
// width: '16',
// height: '16',
// viewBox: '0 0 16 16',
// class: 'octicon octicon-alert',
// 'aria-hidden': 'true'
// },
// }
octicons.alert
// {
// symbol: 'alert',
// keywords: ['warning', 'triangle', 'exclamation', 'point'],
// toSVG: [Function]
// heights: {
// 16: {
// width: 16,
// path: '<path d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/>',
// options: {
// version: '1.1',
// width: '16',
// height: '16',
// viewBox: '0 0 16 16',
// class: 'octicon octicon-alert',
// 'aria-hidden': 'true'
// },
// },
// 24: ...
// }
// }
Published by colebemis over 4 years ago
internal-repo
https://github.com/primer/octicons/pull/375
Published by colebemis over 4 years ago
north-star
https://github.com/primer/octicons/pull/380
Published by jonrohan over 4 years ago
heart-outline
infinity
line-arrow-up
line-arrow-down
line-arrow-right
line-arrow-left
https://github.com/primer/octicons/pull/365
heart
glyphs removing extra points https://github.com/primer/octicons/pull/365
Published by jonrohan almost 5 years ago
Published by jonrohan almost 5 years ago
Published by jonrohan about 5 years ago
Published by jonrohan over 5 years ago
shield-lock
https://github.com/primer/octicons/issues/323 @ashygeePublished by ashygee over 5 years ago