- #878
5797f85Thanks @CameronFoxly! - Save unlink-16.svg, unlink-24.svg
- #860
8a98d2bThanks @ashygee! - Save clock-fill-16.svg, clock-fill-24.svg, skip-fill-16.svg, skip-fil… Thanks @dylanatsmith!
- #849
f6c8d2bThanks @broccolinisoup! - AddtabIndexprop to React icon components
- #831
57f364aThanks @josepmartins! - Adjust flex wrap in UI examples.Fixes #731
- #810
840f4ebThanks @ashygee! - - modifies tasklist icon proposed in https://github.com/github/primer/issues/746- adds a new checkbox icon using metaphor from previous tasklist metaphor
- #789
d59a5e2Thanks @ashygee! - Add file-added, file-removed, file-moved Update file to be consistent in height with other file icons
- #756
2993d47Thanks @Juliusschaeper! - Addedcloudandcloud-offlineicons
-
#736
ec8cab8Thanks @edokoa! - This patch fixes two problems:- We're adding a non-filled
file-directoryicon to the set. - We're fixing a problem where the 16px and 24px versions of the
file-directoryicons were mismatched betweenfillandnon-fillversions of the icon.
THIS IS A BREAKING CHANGE and will require re-linking all the
file-directoryicon references tofile-directory-fill - We're adding a non-filled
- #755
a520a37Thanks @Juliusschaeper! - Second batch of feed icons: merged, forked and achievement
- #751
4e768a5Thanks @Crayon2000! - Fix typos in build.js
- #715
ab991abThanks @edokoa! - Added new icons for:accessibilityappsid-badgelogrepo-deletedtab-externalwebhook
- #708
6933ac3Thanks @Juliusschaeper! - Added first batch of 16px feed icons:feed-discussionfeed-heartfeed-personfeed-repofeed-rocketfeed-starfeed-tag
- #706
2c43706Thanks @Juliusschaeper! - Addcode-of-conducticon
- #685
c59c097Thanks @jonrohan! - Formatting changes to the main readme file, including dark mode support.
- Added first set of 12px filled icons primer#676
- Adjusted 'no-entry' size to match other circle icons primer#673
- Rename 16px
select-singleicon tosingle-selectprimer#665
iterationsprimer#667
- Bump dependencies
- Add
stackicons primer#659 - Add
person-fillandtelescope-fillicons primer#660
bell-fill-16primer#657
- Modify
duplicateicon to differentiate fromcopyprimer#647
- Rename
duplicateicon tocopyprimer#643 - Rename
clippyicon topasteprimer#643
- Update
issue-reopenedprimer#633
- fix vectors for 24px sort icons primer#627 (🙏 @metonym)
key-asterisk-16primer#623sort-ascprimer#619sort-descprimer#619
- Remove unused dependency on nokogiri primer#609 (🙏 @cschlack)
git-pull-request-draftprimer#613git-pull-request-closedprimer#613
- Remove
octofaceprimer#611 - Rename
git-fork-24torepo-forked-24primer#593
numberprimer#592hash(previouslynumber) primer#592diamondprimer#616single-selectprimer#612rowsprimer#617columnsprimer#617issue-draftprimer#614
issue-openedprimer#614issue-closedprimer#614
- Fix 24px
arrow-upicon primer#594 - Prevent clipping using
overflow: visibleprimer#607
tableprimer#564person-addprimer#573blockedprimer#576duplicateprimer#576dependabotprimer#585codescanprimer#588browserprimer#575sidebaricons primer#569codespacesprimer#587
- Remove 24px
insightsicon primer#574 - Remove 24px
copyicon primer#586
- Use more explicit dependencies for Rails helper primer#565
- Fix
megaphone-16primer#554 - Fix
circleicon primer#584
- Add icon-specific class names to each icon component primer#453 @FloEdelmann
- Add
fillprop to each icon component primer#551 @macno
bug(primer#543)multi-select(primer#534)
- Make octicon helper slightly faster (@jhawthorn & @seejohnrun) (#536)
- Rename 16px
trashcanicon totrash(@fermion 🙇) (primer#538)
- Dependency updates (#525, #524, #523, #522, #520)
number(primer#541)video(primer#540)
- Fix rendering of arrows in Safari (@aaronshekey primer#527)
strikethrough(primer#518)
- Align
plusanddashicon (primer#447) - Small edits in JS documentation (primer#499)
- Dependency updates
container(primer#507)squirrel24px icon (primer#508)
- Corrected stroke for 24px
smiley(primer#509)
- Cache retrieval of Octicon SVG paths (primer#491)
- Fix 24px icon names primer#465 (@BenJetson 🙇)
unverifed-24.svg→unverified-24.svgfile-symlink-24.svg→file-symlink-file-24.svgfire-24.svg→flame-24.svgeye-slash-24.svg→eye-closed-24.svg
- Remove 24px
settingsicon. Usegearinstead primer#493
- Corrected positioning for
triangle-down#459
- Dependency updates
- We've given Octicons a new look ✨ Some icons have new names and some icons haven't been redesigned yet. The following table documents those changes. If you're using an octicon in v9.x that doesn't have an equivalent in v10.0 yet, let us know by opening an issue.
| 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 |
|
browser |
Request this icon | |
bug |
Request this icon | |
circuit-board |
cpu |
|
cloud-download |
download |
|
cloud-upload |
upload |
|
dashboard |
meter |
|
dependent |
package-dependents |
|
device-camera |
Request this icon | |
file-pdf |
file |
|
file-symlink-directory |
file-submodule |
|
gist-secret |
lock |
|
gist |
code-square |
|
github-action |
Request this icon | |
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-clone |
Request this icon | |
repo-force-push |
repo-push |
|
repo-pull |
Request this icon | |
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 |
- We designed a set of 24px icons—as well as 16px icons—to accommodate interfaces that need larger icons. All package implementations now choose which SVG to render based on the size passed in.
-
Icon components (e.g.
AlertIcon,ArrowRightIcon, etc.) now acceptsize,ariaLabel,verticalAlign, andclassNameprops and can be used on their own. No need to pass them to theOcticoncomponent.<AlertIcon size={24} />
-
Icon components will now choose the best SVG icon to render based on the
sizepassed in. -
The
Octiconcomponent is deprecated. Use icon components on their own instead:- <Octicon icon={AlertIcon} /> + <AlertIcon />
-
All icon component names now include
Iconat the end (e.g.Alert→AlertIcon). -
In order to enable tree-shaking, we removed the
iconsByNameandgetIconByNameexports. -
Octiconno longer acceptswidthorheightprops. Use thesizeprop 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 thesizeprop and thewidthwill be scaled proportionally. -
We renamed the
ariaLabelprop toaria-labelto be consistent with React: https://reactjs.org/docs/accessibility.html#wai-aria- <AlertIcon ariaLabel="alert"> + <AlertIcon aria-label="alert">
-
Setting
verticalAlign="top"on theOcticoncomponent or any icon component will now apply avertical-align: top;style to the<svg>. Previously, we were translating "top" to "text-top." So settingverticalAlign="top"would apply avertical-align: text-top;style to the<svg>. If you want a vertical alignment of "text-top," set theverticalAlignprop to"text-top". -
Custom icon components passed to the
Octiconcomponent 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]- The structure of each icon object has been updated to allow support multiple SVGs per icon:
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: ...
// }
// }- New icon
north-starprimer#380
- New icon
internal-repoprimer#375
- New icons
heart-outlineinfinityline-arrow-upline-arrow-downline-arrow-rightline-arrow-leftprimer#365
- Contributing docs updates and issue template updates #367
- Update
heartglyphs removing extra points primer#365
- Workflow icon had a cutoff edge.
- Workflow icons primer#356 @ashygee
- Allow 'unset' value for verticalAlign property primer#354 @Fs00
- New icons for save/unsave and primitive dot stroke primer#351 @ashygee @colinkeany
- Migrating to new yml actions syntax primer#332 @max & @jonrohan
- Update jekyll gemspec to support Jekyll 4.0 primer#347 @ntotten
- Octicons react isn't including className primer#271 @pocke
- renamed the original shield icon to
shield-lockprimer#323 @ashygee - test for duplicate icons primer#322 @jonrohan
- Adding skip icon primer#318 @ashygee
- Rename
octiconsto@primer/octiconsprimer#311 - Rename
@githubprimer/octicons-reactto@primer/octicons-reactprimer#311
- Adding a shield icon primer#310 @ashygee @donokuda
- Adding new repo icons primer#316 @superbryntendo
- a11y aria-hidden update from @muan primer#295
- Verified icons poor rendering. @ashygee primer#297
- Docs update for contributing @ashygee primer#298
- Thumbs up/down icons needed some vector improvements. primer#287
- Node package missing
build/build.cssfile. primer#292
- Rollup files missing from octicons react package primer#282
- Using Actions to build and deploy Octicons primer#276
- Jon Rohan (jonrohan)
- New "changes requested" icon primer#267
- Contrib Doc Updates primer#256
- Updating licenses to 2019 primer#272
- Add
fold-upandfold-downicons, courtesy of @pmarsceill
- Add
eye-closedicon, courtesy of @colinkeany
- Patch release for failed 8.1.1 release
- Fix for
list-orderedicon primer#252 - In React Octicons, we set aria-hidden to false if there's an aria-label provided
- Add the
arrow-bothicon courtesy of @venetucci - TypeScript types are now available thanks to @j-f1!
- Fix CI builds for outside contributors (as long as they aren't changing octicons)
- Fix typo in README
- Update README with
@githubprimer/octicons-react scope - Publish release candidates from any branch beginning with
release
- Breaking changes in
octicons_react#225 - After the initial release of octicons_react https://github.com/primer/octicons/releases/tag/v7.4.0, we needed to rename the scope of the package. Due to some deployment conflicts in our pipelines.
- This release marks the first official version of Octicons for React! Check out the
@github/octicons-reactpackage on npm for more info, or peruse the long-running PR #222. - CI status is now reported to the
#design-opsSlack channel - Jekyll Octicons has moved in this repo from
lib/jekyll-octiconstolib/octicons_jekyll
- Fix for heart icon primer#211
- Adding an archive icon created by @colinkeany
- Fixes primer#182
- Fixed versioning strategy https://github.com/primer/octicons/pull/#208
- Removing
file-textandmail-replyicons. Usefileandreplyrespectively. - Removing spritesheet calls and
toSVGUsemethod.
- Removing
file-textandmail-replyicons. Usefileandreplyrespectively. - Removing spritesheet calls and
to_svg_usemethod.
Fixes:
- Typo
kebab-veritcalbecomeskebab-vertical
Added:
kebab-horizontalandkebab-verticalicons- Polyfill for the
Object.assignfunction
Removes:
- Removing a duplicate
ellipsesicon from the set. Useellipsisinstead.
Fixes:
- projects icon renders as a block, using
fill-rulefixes it
Adds:
projectnotescreen-fullscreen-normal- More node.js api endpoints for accessing icons primer#120
- Creating a spritesheet demo primer#121
Removes:
- Deprecating support for the webfont primer#117
- Stop checking
/build/directory into repository primer#118 - Removing sass as a dependency primer#119
Adds:
- svg.json file that is accessible from node require
Fixes:
- Vertical alignment on
italic
Modifies:
personorganization
Fixes:
- Removing inline sourcemap from
minversions of css.
Adds:
- Keywords.json file that has an index of all octicons with alias names
Fixes:
- Putting the
$octicons-font-pathback in the scss file.
Adds:
- Installation docs primer#94
grabberplus-small
Modifies:
smiley
Refines:
- Renames
mail-replytoreplyand refines its shape.
Fixes:
- Revert license back to SPDX standard
Adds:
- Whole new grunt build system including svg sprite sheet.
- adding css min primer#60
- adding woff2 format primer#3
- creates spritesheet of svg files primer#88
Removes:
- Bower support
Fixes:
Adds:
unverified
Refines:
verified
This includes various SVG viewport refinements.
Refines:
thumbs-downlogo-github
Adds:
verifiedsmiley
Removes:
color-mode
Refines:
primitive-dothorizontal-ruletriangle-downtriangle-uptriangle-lefttriangle-rightglobeflamecomment-discussion
Adds:
logo-gist
Resizes all our SVG to be 16x16 instead of 1024x1024
Adds:
boldtext-sizeitalictasklist
It also normalizes some styling in:
list-unorderedlist-orderedquotementionbookmarkthreebars
Removes
screen-normalscreen-full
Adds
shield
This thickens stroke widths slightly on the following icons:
circle-slashclockcloud-uploadcloud-downloaddashboardinfoissue-closedissueissue-reopenedhistoryquestionsearch
Fills comment-discussion
Thickens x to match checkmark
Some files were missing in 3.0.0
Removes
microscopebeersplitpuzzlestepspodiumtimer- all
alignmenticons - all
moveicons - all
playbackicons - all
jumpicons
Adds
beakerbelldesktop-downloadwatch
Line-weight changes, sizing normalization, and new drawings
circle-slashlockcloud-uploadcloud-downloadplus✕broadcastlock- all
repoicons - organization
- person
- all
chevrons&triangles - all
difficons clippy- all
issueand circular icons rssrubycancelsettingsmirrorexternal-linkhistorygearsettingsinfohistorypackagegist-secretrocketlawtelescopesearchtagnormal-screeniphoneno-new-linedesktop- all
giticons circuit-boardhearthomebriefcasewikibookmarkbriefcasecalendarcolor-modecommentdiscussionscredit-carddashboardcameravideobugdesktopellipseseye- all
files&folders foldunfoldgiftgraphhubotinboxjerseykeyboardlight-bulblinklocationmailmail-readmarkerplugmutepencilpush-pinfullscreenunfullscreenserversign-insign-outtagterminalthumbs-upthumbs-downtrashunmuteversionsgistkeymegaphonechecklist
- Add the scss file I forgot to include
- Add
octicons.scss - Revert path changes to
sprockets-octicons.scss, as they broke octicons in sprockets.
- Add a path variable to
sprockets-octicons.scssto be consistent with octicons.less`
- Use SPDX license identifiers in package.json
Fixes file icons for
file-binaryfile-codefile-mediafile-pdffile-symlink-filefile-textfile-zip
- Fix vector artifact and smooth curves in
mark-github
- Add two new icons:
thumbsupandthumbsdown
- Add mention of github.com/logos to the license
- Hello world