Octicons
A scalable set of icons handcrafted by GitHub.
Octicon nav items navigation
These are guidelines to use as a reference when designing new octicons.
Grid sizes
Always design two versions of each icon: a 16px version and a 24px version.
12px icons are special and should only be created if there is a specific use case where a 16px icon can't be used.
Stroke
Use a consistent stroke width of 1.5px for both 16px and 24px icons.
Reference shapes
Use the following shapes as sizing references to ensure that the "optical volume" of your icon is consistent with the rest of the set. See the "Grid and Optical Volume" section of Nucleo's Icon Guidelines to learn more about "optical volume."
Circle
Square
Rectangle
Caps and joins
Use round caps and joins.
Corners
Use 1px radius for corners unless a different radius makes the icon more recognizable (e.g. repo).
Use 0.25px radius for small filled elements inside icons, like filled arrowheads.
Gaps
Use a 1px gap to separate overlapping objects.
Use a 1.5px gap around modifier elements, like lines and arrows.
Perspective
Use 2D perspective unless depth makes the icon more recognizable.
Pixel alignment
Align the outer edge of shapes to pixel boundaries when possible.
Arrowheads
Use line arrowheads unless there is not enough room.
Contributing
See the contribution guidelines in the primer/octicons repository.