- #1037
7402e69cThanks @jonrohan! - Update octicons-react to use presentational attributes over inline styles for base styles
- #1047
48198033Thanks @joshblack! - Add support for SVG props to base icons
- #1041
ef89a78fThanks @lukasoppermann! - Adds sparkles icon (3 sparkles)
- #1027
12c6fb00Thanks @joshblack! - Update the build output to reduce number of generated assets included in the package on npm
- #1033
7a5ac858Thanks @colebemis! - Updatethumbsupandthumbsdownicons
- #1028
d27ea2f6Thanks @CameronFoxly! - Adding ai-model icon at 16 & 24px
- #983
30be326aThanks @lukasoppermann! - Add multiple missing icons
- #1020
449d81f1Thanks @joshblack! - Update types for @primer/octicons-react to explicitly include extensions for different moduleResolution settings
- #1008
c5786ff2Thanks @joshblack! - Update ESM import to use mjs extension when in parent CommonJS module
- #1007
79b93954Thanks @joshblack! - Update octicons in React to no longer setrole="img"if the icon is aria-hidden.
- #976
15ea1e43Thanks @UnicodeRogue! - Adds filter remove octicon
- #970
640441eeThanks @CameronFoxly! - Update repo-clone and repo-pull, add 24px versions
- #962
5805622cThanks @CameronFoxly! - Edited small details oncopilot-warningandcopilot-errorto maintain consistency with the rest of the copilot icon set.
- #959
268b2021Thanks @CameronFoxly! - Add pivot-column icon
- #932
ea81ec17Thanks @green6erry! - Addid,title, andaria-labelledbyprops to icon components
- #957
ab786838Thanks @CameronFoxly! - Update copilot octicons for consistency
- #933
af6edab9Thanks @stvehayes! - Adddevicesicon
- #950
8f0edd9eThanks @CameronFoxly! - Updates thepinicon with a flipped composition, and addspin-slash
- #949
f6796914Thanks @CameronFoxly! - Updatingmove-to-topandmove-to-bottomto fix logic and alignment issues.
- #943
a38ae2d2Thanks @broccolinisoup! - Remove support forOcticonUpdate peer dependency React version to support >=16.3 Update icons to use React.forwardRef
-
#914
4d558ed9Thanks @omerbensaadon! - Update icon naming conventions for Tracks and Tracked By:issue-tracked-by→issue-tracksissue-tracked-in→issue-tracked-by
- #924
6b494dfeThanks @CameronFoxly! - Added missing 24px version of shield-slash-24.svg
- #904
ad0eb569Thanks @CameronFoxly! - Edit: Upload and download icons Add: Move to start, end, top, and bottom icons
- #919
bbff0d13Thanks @CameronFoxly! - Save zoom-in-24.svg, zoom-out-24.svg, zoom-out-16.svg, zoom-in-16.svg
- #895
ce11fb3bThanks @joshblack! - Update the npm package for@primer/octicons-reactto include theexportsfield and explicitly list out files inpackage.json
- #894
410831bcThanks @langermank! - [Bug] up/down chevron alignment fix
- #886
b5a1530fThanks @eliperkins! - Upgrade to latest version of SVG Optimizer to remove invalid SVG paths on iOS, macOS and other native Apple target platforms.
- #882
503bafb9Thanks @manuelpuyol! - Use parameter defaults instead of defaultProps
- #883
8a039a7bThanks @eliperkins! - Remove fill-rule from SVGs using picosvg as an optimization step
- #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 #676
- Adjusted 'no-entry' size to match other circle icons #673
- Rename 16px
select-singleicon tosingle-select#665
iterations#667
- Bump dependencies
bell-fill-16#657
- Modify
duplicateicon to differentiate fromcopy#647
- Update
issue-reopened#633
- fix vectors for 24px sort icons #627 (🙏 @metonym)
- Remove unused dependency on nokogiri #609 (🙏 @cschlack)
number#592hash(previouslynumber) #592diamond#616single-select#612rows#617columns#617issue-draft#614
table#564person-add#573blocked#576duplicate#576dependabot#585codescan#588browser#575sidebaricons #569codespaces#587
- Use more explicit dependencies for Rails helper #565
- Add icon-specific class names to each icon component #453 @FloEdelmann
- Add
fillprop to each icon component #551 @macno
- Make octicon helper slightly faster (@jhawthorn & @seejohnrun) (#536)
- Rename 16px
trashcanicon totrash(@fermion 🙇) (#538)
- Dependency updates (#525, #524, #523, #522, #520)
- Fix rendering of arrows in Safari (@aaronshekey #527)
strikethrough(#518)
- Dependency updates
- Corrected stroke for 24px
smiley(#509)
- Cache retrieval of Octicon SVG paths (#491)
- Fix 24px icon names #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 #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-star#380
- New icon
internal-repo#375
- New icons
heart-outlineinfinityline-arrow-upline-arrow-downline-arrow-rightline-arrow-left#365
- Contributing docs updates and issue template updates #367
- Update
heartglyphs removing extra points #365
- Workflow icon had a cutoff edge.
- New icons for save/unsave and primitive dot stroke #351 @ashygee @colinkeany
- Migrating to new yml actions syntax #332 @max & @jonrohan
- Update jekyll gemspec to support Jekyll 4.0 #347 @ntotten
- Octicons react isn't including className #271 @pocke
- renamed the original shield icon to
shield-lock#323 @ashygee - test for duplicate icons #322 @jonrohan
- Adding skip icon #318 @ashygee
- Rename
octiconsto@primer/octicons#311 - Rename
@githubprimer/octicons-reactto@primer/octicons-react#311
- a11y aria-hidden update from @muan #295
- Verified icons poor rendering. @ashygee #297
- Docs update for contributing @ashygee #298
- Thumbs up/down icons needed some vector improvements. #287
- Node package missing
build/build.cssfile. #292
- Rollup files missing from octicons react package #282
- Using Actions to build and deploy Octicons #276
- Jon Rohan (jonrohan)
- 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 #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 #211
- Adding an archive icon created by @colinkeany
- Fixes #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 #120
- Creating a spritesheet demo #121
Removes:
- Deprecating support for the webfont #117
- Stop checking
/build/directory into repository #118 - Removing sass as a dependency #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 #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 #60
- adding woff2 format #3
- creates spritesheet of svg files #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