- #1008
c5786ff2
Thanks @joshblack! - Update ESM import to use mjs extension when in parent CommonJS module
- #1007
79b93954
Thanks @joshblack! - Update octicons in React to no longer setrole="img"
if the icon is aria-hidden.
- #976
15ea1e43
Thanks @UnicodeRogue! - Adds filter remove octicon
- #970
640441ee
Thanks @CameronFoxly! - Update repo-clone and repo-pull, add 24px versions
- #962
5805622c
Thanks @CameronFoxly! - Edited small details oncopilot-warning
andcopilot-error
to maintain consistency with the rest of the copilot icon set.
- #959
268b2021
Thanks @CameronFoxly! - Add pivot-column icon
- #932
ea81ec17
Thanks @green6erry! - Addid
,title
, andaria-labelledby
props to icon components
- #957
ab786838
Thanks @CameronFoxly! - Update copilot octicons for consistency
- #933
af6edab9
Thanks @stvehayes! - Adddevices
icon
- #950
8f0edd9e
Thanks @CameronFoxly! - Updates thepin
icon with a flipped composition, and addspin-slash
- #949
f6796914
Thanks @CameronFoxly! - Updatingmove-to-top
andmove-to-bottom
to fix logic and alignment issues.
- #943
a38ae2d2
Thanks @broccolinisoup! - Remove support forOcticon
Update peer dependency React version to support >=16.3 Update icons to use React.forwardRef
-
#914
4d558ed9
Thanks @omerbensaadon! - Update icon naming conventions for Tracks and Tracked By:issue-tracked-by
→issue-tracks
issue-tracked-in
→issue-tracked-by
- #924
6b494dfe
Thanks @CameronFoxly! - Added missing 24px version of shield-slash-24.svg
- #904
ad0eb569
Thanks @CameronFoxly! - Edit: Upload and download icons Add: Move to start, end, top, and bottom icons
- #919
bbff0d13
Thanks @CameronFoxly! - Save zoom-in-24.svg, zoom-out-24.svg, zoom-out-16.svg, zoom-in-16.svg
- #895
ce11fb3b
Thanks @joshblack! - Update the npm package for@primer/octicons-react
to include theexports
field and explicitly list out files inpackage.json
- #894
410831bc
Thanks @langermank! - [Bug] up/down chevron alignment fix
- #886
b5a1530f
Thanks @eliperkins! - Upgrade to latest version of SVG Optimizer to remove invalid SVG paths on iOS, macOS and other native Apple target platforms.
- #882
503bafb9
Thanks @manuelpuyol! - Use parameter defaults instead of defaultProps
- #883
8a039a7b
Thanks @eliperkins! - Remove fill-rule from SVGs using picosvg as an optimization step
- #878
5797f85
Thanks @CameronFoxly! - Save unlink-16.svg, unlink-24.svg
- #860
8a98d2b
Thanks @ashygee! - Save clock-fill-16.svg, clock-fill-24.svg, skip-fill-16.svg, skip-fil… Thanks @dylanatsmith!
- #849
f6c8d2b
Thanks @broccolinisoup! - AddtabIndex
prop to React icon components
- #831
57f364a
Thanks @josepmartins! - Adjust flex wrap in UI examples.Fixes #731
- #810
840f4eb
Thanks @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
d59a5e2
Thanks @ashygee! - Add file-added, file-removed, file-moved Update file to be consistent in height with other file icons
- #756
2993d47
Thanks @Juliusschaeper! - Addedcloud
andcloud-offline
icons
-
#736
ec8cab8
Thanks @edokoa! - This patch fixes two problems:- We're adding a non-filled
file-directory
icon to the set. - We're fixing a problem where the 16px and 24px versions of the
file-directory
icons were mismatched betweenfill
andnon-fill
versions of the icon.
THIS IS A BREAKING CHANGE and will require re-linking all the
file-directory
icon references tofile-directory-fill
- We're adding a non-filled
- #755
a520a37
Thanks @Juliusschaeper! - Second batch of feed icons: merged, forked and achievement
- #751
4e768a5
Thanks @Crayon2000! - Fix typos in build.js
- #715
ab991ab
Thanks @edokoa! - Added new icons for:accessibility
apps
id-badge
log
repo-deleted
tab-external
webhook
- #708
6933ac3
Thanks @Juliusschaeper! - Added first batch of 16px feed icons:feed-discussion
feed-heart
feed-person
feed-repo
feed-rocket
feed-star
feed-tag
- #706
2c43706
Thanks @Juliusschaeper! - Addcode-of-conduct
icon
- #685
c59c097
Thanks @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-single
icon tosingle-select
primer#665
iterations
primer#667
- Bump dependencies
- Add
stack
icons primer#659 - Add
person-fill
andtelescope-fill
icons primer#660
bell-fill-16
primer#657
- Modify
duplicate
icon to differentiate fromcopy
primer#647
- Rename
duplicate
icon tocopy
primer#643 - Rename
clippy
icon topaste
primer#643
- Update
issue-reopened
primer#633
- fix vectors for 24px sort icons primer#627 (🙏 @metonym)
key-asterisk-16
primer#623sort-asc
primer#619sort-desc
primer#619
- Remove unused dependency on nokogiri primer#609 (🙏 @cschlack)
git-pull-request-draft
primer#613git-pull-request-closed
primer#613
- Remove
octoface
primer#611 - Rename
git-fork-24
torepo-forked-24
primer#593
number
primer#592hash
(previouslynumber
) primer#592diamond
primer#616single-select
primer#612rows
primer#617columns
primer#617issue-draft
primer#614
issue-opened
primer#614issue-closed
primer#614
- Fix 24px
arrow-up
icon primer#594 - Prevent clipping using
overflow: visible
primer#607
table
primer#564person-add
primer#573blocked
primer#576duplicate
primer#576dependabot
primer#585codescan
primer#588browser
primer#575sidebar
icons primer#569codespaces
primer#587
- Remove 24px
insights
icon primer#574 - Remove 24px
copy
icon primer#586
- Use more explicit dependencies for Rails helper primer#565
- Fix
megaphone-16
primer#554 - Fix
circle
icon primer#584
- Add icon-specific class names to each icon component primer#453 @FloEdelmann
- Add
fill
prop to each icon component primer#551 @macno
bug
(primer#543)multi-select
(primer#534)
- Make octicon helper slightly faster (@jhawthorn & @seejohnrun) (#536)
- Rename 16px
trashcan
icon 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
plus
anddash
icon (primer#447) - Small edits in JS documentation (primer#499)
- Dependency updates
container
(primer#507)squirrel
24px 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.svg
file-symlink-24.svg
→file-symlink-file-24.svg
fire-24.svg
→flame-24.svg
eye-slash-24.svg
→eye-closed-24.svg
- Remove 24px
settings
icon. Usegear
instead 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
, andclassName
props and can be used on their own. No need to pass them to theOcticon
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
andgetIconByName
exports. -
Octicon
no longer acceptswidth
orheight
props. Use thesize
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 thesize
prop and thewidth
will be scaled proportionally. -
We renamed the
ariaLabel
prop toaria-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 theOcticon
component 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 theverticalAlign
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]
- 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
primer#380
- New icon
internal-repo
primer#375
- New icons
heart-outline
infinity
line-arrow-up
line-arrow-down
line-arrow-right
line-arrow-left
primer#365
- Contributing docs updates and issue template updates #367
- Update
heart
glyphs 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-lock
primer#323 @ashygee - test for duplicate icons primer#322 @jonrohan
- Adding skip icon primer#318 @ashygee
- Rename
octicons
to@primer/octicons
primer#311 - Rename
@githubprimer/octicons-react
to@primer/octicons-react
primer#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.css
file. 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-up
andfold-down
icons, courtesy of @pmarsceill
- Add
eye-closed
icon, courtesy of @colinkeany
- Patch release for failed 8.1.1 release
- Fix for
list-ordered
icon primer#252 - In React Octicons, we set aria-hidden to false if there's an aria-label provided
- Add the
arrow-both
icon 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-react
package on npm for more info, or peruse the long-running PR #222. - CI status is now reported to the
#design-ops
Slack channel - Jekyll Octicons has moved in this repo from
lib/jekyll-octicons
tolib/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-text
andmail-reply
icons. Usefile
andreply
respectively. - Removing spritesheet calls and
toSVGUse
method.
- Removing
file-text
andmail-reply
icons. Usefile
andreply
respectively. - Removing spritesheet calls and
to_svg_use
method.
Fixes:
- Typo
kebab-veritcal
becomeskebab-vertical
Added:
kebab-horizontal
andkebab-vertical
icons- Polyfill for the
Object.assign
function
Removes:
- Removing a duplicate
ellipses
icon from the set. Useellipsis
instead.
Fixes:
- projects icon renders as a block, using
fill-rule
fixes it
Adds:
project
note
screen-full
screen-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:
person
organization
Fixes:
- Removing inline sourcemap from
min
versions of css.
Adds:
- Keywords.json file that has an index of all octicons with alias names
Fixes:
- Putting the
$octicons-font-path
back in the scss file.
Adds:
- Installation docs primer#94
grabber
plus-small
Modifies:
smiley
Refines:
- Renames
mail-reply
toreply
and 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-down
logo-github
Adds:
verified
smiley
Removes:
color-mode
Refines:
primitive-dot
horizontal-rule
triangle-down
triangle-up
triangle-left
triangle-right
globe
flame
comment-discussion
Adds:
logo-gist
Resizes all our SVG to be 16x16 instead of 1024x1024
Adds:
bold
text-size
italic
tasklist
It also normalizes some styling in:
list-unordered
list-ordered
quote
mention
bookmark
threebars
Removes
screen-normal
screen-full
Adds
shield
This thickens stroke widths slightly on the following icons:
circle-slash
clock
cloud-upload
cloud-download
dashboard
info
issue-closed
issue
issue-reopened
history
question
search
Fills comment-discussion
Thickens x
to match checkmark
Some files were missing in 3.0.0
Removes
microscope
beer
split
puzzle
steps
podium
timer
- all
alignment
icons - all
move
icons - all
playback
icons - all
jump
icons
Adds
beaker
bell
desktop-download
watch
Line-weight changes, sizing normalization, and new drawings
circle-slash
lock
cloud-upload
cloud-download
plus
✕
broadcast
lock
- all
repo
icons - organization
- person
- all
chevrons
&triangles
- all
diff
icons clippy
- all
issue
and circular icons rss
ruby
cancel
settings
mirror
external-link
history
gear
settings
info
history
package
gist-secret
rocket
law
telescope
search
tag
normal-screen
iphone
no-new-line
desktop
- all
git
icons circuit-board
heart
home
briefcase
wiki
bookmark
briefcase
calendar
color-mode
comment
discussions
credit-card
dashboard
camera
video
bug
desktop
ellipses
eye
- all
files
&folders
fold
unfold
gift
graph
hubot
inbox
jersey
keyboard
light-bulb
link
location
mail
mail-read
marker
plug
mute
pencil
push-pin
fullscreen
unfullscreen
server
sign-in
sign-out
tag
terminal
thumbs-up
thumbs-down
trash
unmute
versions
gist
key
megaphone
checklist
- 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.scss
to be consistent with octicons.less`
- Use SPDX license identifiers in package.json
Fixes file icons for
file-binary
file-code
file-media
file-pdf
file-symlink-file
file-text
file-zip
- Fix vector artifact and smooth curves in
mark-github
- Add two new icons:
thumbsup
andthumbsdown
- Add mention of github.com/logos to the license
- Hello world