- #1033
7a5ac858
Thanks @colebemis! - Updatethumbsup
andthumbsdown
icons
- #1028
d27ea2f6
Thanks @CameronFoxly! - Adding ai-model icon at 16 & 24px
- #983
30be326a
Thanks @lukasoppermann! - Add multiple missing icons
- #1020
449d81f1
Thanks @joshblack! - Update types for @primer/octicons-react to explicitly include extensions for different moduleResolution settings
- #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 #676
- Adjusted 'no-entry' size to match other circle icons #673
- Rename 16px
select-single
icon tosingle-select
#665
iterations
#667
- Bump dependencies
bell-fill-16
#657
- Modify
duplicate
icon 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
#575sidebar
icons #569codespaces
#587
- Use more explicit dependencies for Rails helper #565
- Add icon-specific class names to each icon component #453 @FloEdelmann
- Add
fill
prop to each icon component #551 @macno
- Make octicon helper slightly faster (@jhawthorn & @seejohnrun) (#536)
- Rename 16px
trashcan
icon 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.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 #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
#380
- New icon
internal-repo
#375
- New icons
heart-outline
infinity
line-arrow-up
line-arrow-down
line-arrow-right
line-arrow-left
#365
- Contributing docs updates and issue template updates #367
- Update
heart
glyphs 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
octicons
to@primer/octicons
#311 - Rename
@githubprimer/octicons-react
to@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.css
file. #292
- Rollup files missing from octicons react package #282
- Using Actions to build and deploy Octicons #276
- Jon Rohan (jonrohan)
- 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 #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 #211
- Adding an archive icon created by @colinkeany
- Fixes #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 #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:
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 #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 #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-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