{"data":{"allMdx":{"nodes":[{"fileAbsolutePath":"/home/runner/work/octicons/octicons/docs/content/index.mdx","frontmatter":{"title":"Octicons"},"rawBody":"---\ntitle: Octicons\n---\n\nimport {HeroLayout} from '@primer/gatsby-theme-doctocat'\nimport Icons from '../src/components/icons'\n\nexport default HeroLayout\n\n\n","parent":{"__typename":"File","relativeDirectory":"","name":"index"}},{"fileAbsolutePath":"/home/runner/work/octicons/octicons/docs/content/guidelines/design.mdx","frontmatter":{"title":"Design guidelines"},"rawBody":"---\ntitle: Design guidelines\n---\n\nimport {Grid, Flex, Box} from '@primer/components'\n\nThese are guidelines to use as a reference when designing new octicons.\n\n## Grid sizes\n\nDesign two versions of each icon: a 16px version and a 24px version. \n\n\n
\n \n \n \n
16x16 grid
\n
\n
\n \n \n \n
24x24 grid
\n
\n\n\n## Stroke\n\nUse a consistent stroke width of 1.5px for both 16px and 24px icons.\n\n
\n \n \n \n
1.5px stroke on 16px icon
\n
\n\n\n## Reference shapes \n\nUse 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](https://blog.nucleoapp.com/nucleo-icon-guidelines-introduction-70092f8b4697) to learn more about \"optical volume.\"\n\n### Circle\n\n\n
\n \n \n \n
Circle on 16x16 grid
\n
\n
\n \n \n \n
Circle on 16x16 grid example
\n
\n
\n \n \n \n
Circle on 24x24 grid
\n
\n
\n \n \n \n
Circle on 24x24 grid example
\n
\n\n\n### Square\n\n\n
\n \n \n \n
Square on 16x16 grid example
\n
\n
\n \n \n \n
Square on 16x16 grid example
\n
\n
\n \n \n \n
Square on 24x24 grid
\n
\n
\n \n \n \n
Square on 24x24 grid example
\n
\n\n\n### Rectangle\n\n\n
\n \n \n \n
Rectangle on 16x16 grid
\n
\n
\n \n \n \n
Rectangle on 16x16 grid example
\n
\n
\n \n \n \n
Rectangle on 24x24 grid
\n
\n
\n \n \n \n
Rectangle on 24x24 grid example
\n
\n\n\n## Caps and joins\n\nUse round caps and joins.\n\n
\n \n \n \n
Round caps and joins
\n
\n\n## Corners\n\nUse 1px radius for corners unless a different radius makes the icon more recognizable (e.g. [repo](/repo-16)). \n\n\n
\n \n \n \n
1px radius on 16px icon
\n
\n
\n \n \n \n
1px radius on 24px icon
\n
\n\n\nUse 0.25px radius for small filled elements inside icons, like filled arrowheads.\n\n\n
\n \n \n \n
0.25px radius on arrowhead
\n
\n
\n \n \n \n
0.25px radius on bookmark in repo icon
\n
\n\n\n## Gaps\n\nUse a 1px gap to separate overlapping objects.\n\n\n \n \n \n
1px gap in comment-discussion icon
\n\n\nUse a 1.5px gap around modifier elements, like lines and arrows.\n\n\n
\n \n \n \n
1.5px gap in bookmark-slash icon
\n
\n
\n \n \n \n
1.5px gap in package-dependencies icon
\n
\n\n\n## Perspective\n\nUse 2D perspective unless depth makes the icon more recognizable.\n\n\n \n \n \n \n
Use 2D perspective
\n \n \n \n \n \n
Don't add unnecessary depth
\n \n \n \n \n \n
Use depth when it adds meaning
\n \n \n \n \n \n
Don't use a 2D perspective if it makes the icon unrecognizable
\n \n\n\n## Pixel alignment\n\nAlign the outer edge of shapes to pixel boundaries when possible.\n\n\n \n \n \n \n
Align the outer edge of shapes to pixel boundaries
\n \n \n \n \n \n
Don't align the inner edge of shapes to pixel boundaries
\n \n\n\n\n## Arrowheads\n\nUse line arrowheads unless there is not enough room.\n\n\n\n
\n \n \n \n
Line arrowhead in sign-out icon
\n
\n
\n \n \n \n
Filled arrowhead in link-external icon
\n
\n\n\n\n## Contributing\n\n### Creating a pull request\n\nIf you work at GitHub, you can use the [Octicons Push](https://www.figma.com/community/plugin/825432045044458754/Octicons-Push) Figma plugin to start an Octicons pull request from Figma.\n\nHere's how it works:\n1. Select the icon frames you want to commit. Make sure the frames are either 16x16 or 24x24 and that you've outlined all strokes.\n1. Open the Octicons Push plugin.\n1. Select the branch you want to commit to. You can choose an existing branch or create a new branch.\n1. Press \"Commit.\" The plugin will then export, commit, and push the selected icons to the branch you chose. If you chose to create a new branch, the plugin will give you a link to where you can start a new pull request with your branch.\n\nAfter you create a pull request, a member of the [design systems](https://primer.style/about/#team/) team will triage and review your contribution.\n\n\n\n\n### Review questions\n\nHere are a few questions we'll ask when reviewing new octicons. Keep these in mind as you're designing:\n\n- Where will this icon be used in the context of GitHub UI?\n- Is an icon necessary in that context?\n- Could we use an existing icon?\n- Is the icon trying to represent too many ideas? \n- Does it follow the design guidelines?\n","parent":{"__typename":"File","relativeDirectory":"guidelines","name":"design"}},{"fileAbsolutePath":"/home/runner/work/octicons/octicons/docs/content/guidelines/index.mdx","frontmatter":{"title":"Guidelines"},"rawBody":"---\ntitle: Guidelines\n---\n\n- [Design](/guidelines/design)\n- [Usage](/guidelines/usage)\n","parent":{"__typename":"File","relativeDirectory":"guidelines","name":"index"}},{"fileAbsolutePath":"/home/runner/work/octicons/octicons/docs/content/guidelines/usage.mdx","frontmatter":{"title":"Usage guidelines"},"rawBody":"---\ntitle: Usage guidelines\n---\n\nTo learn more on how to use our icons, please visit our [Primer icon guidelines](https://primer.style/design/components/icon).\n","parent":{"__typename":"File","relativeDirectory":"guidelines","name":"usage"}}]}}}
![\"\"](\"https://compai.pub/v1/png/41d55c2894e91bd7d0594d005ce51e2471292973343c01dcbbc271c34aa2d702\"/)
\n ![\"\"](\"https://compai.pub/v1/png/b270acfcf262364d2647cf96df17fd9b89aa891f65bc3c50c404d74531e8bb0e\"/)
\n