![octicons cover light](https://user-images.githubusercontent.com/54012/138925195-5779c51d-ff8c-4264-a914-e64f4843893d.png#gh-light-mode-only)
![octicons cover dark](https://user-images.githubusercontent.com/54012/138925203-80e1afa1-ba54-4731-9525-3c41186663f9.png#gh-dark-mode-only)
<br>
<br>

<h1 align="center">Primer Octicons</h1>

<p align="center">Octicons are a set of SVG icons built by GitHub for GitHub.</p>

<p align="center">
  <a aria-label="build status" href="https://github.com/primer/octicons/actions/workflows/ci.yml">
    <img alt="" src="https://github.com/primer/octicons/actions/workflows/ci.yml/badge.svg?branch=main&event=push">
  </a>
  <a aria-label="publish status" href="https://github.com/primer/octicons/actions/workflows/publish.yml">
    <img alt="" src="https://github.com/primer/octicons/actions/workflows/publish.yml/badge.svg">
  </a>
</p>

## Libraries

This repository contains several libraries. Each of them is in the `lib/` folder and gives access to Octicons on a different platform/language.

### JavaScript

The octicons node.js library is the main JavaScript library. With [a JavaScript API](/lib/octicons_node/README.md) that can be used in a variety of applications.

| Package                                                                                                      | Version                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
| **[@primer/octicons](/lib/octicons_node)** <br />Node.js package with JavaScript API                         | [![npm version](https://img.shields.io/npm/v/@primer/octicons.svg)](https://www.npmjs.org/package/@primer/octicons)               |
| **[@primer/octicons-react](/lib/octicons_react)** <br />React Octicons components                            | [![npm version](https://img.shields.io/npm/v/@primer/octicons-react.svg)](https://www.npmjs.org/package/@primer/octicons-react)   |
| **[@primer/styled-octicons](/lib/octicons_styled)** <br />React Octicons components with Styled System props | [![npm version](https://img.shields.io/npm/v/@primer/styled-octicons.svg)](https://www.npmjs.org/package/@primer/styled-octicons) |

### Ruby

| Package                                                                       | Version                                                                                                       |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| **[octicons](/lib/octicons_gem)** <br />Ruby gem with Ruby API                | [![Gem version](https://img.shields.io/gem/v/octicons.svg)](https://rubygems.org/gems/octicons)               |
| [octicons_helper](/lib/octicons_helper)<br />Rails helper for using octicons  | [![Gem version](https://img.shields.io/gem/v/octicons_helper.svg)](https://rubygems.org/gems/octicons_helper) |
| [jekyll-octicons](/lib/octicons_jekyll)<br />Jekyll plugin for using octicons | [![Gem version](https://img.shields.io/gem/v/jekyll-octicons.svg)](https://rubygems.org/gems/jekyll-octicons) |

## Icon names and compatibility

The shape-based `triangle`, `triangle-circle`, and `triangle-fill` names follow the `square` family. Each provides 16px and 24px artwork. `git-pull-request-unlisted` provides 16px artwork.

| Canonical name    | Compatibility name             | Preserved behavior                                                          |
| ----------------- | ------------------------------ | --------------------------------------------------------------------------- |
| `bookmark-fill`   | `bookmark-filled` (deprecated) | The old name retains its 16px drawing at every display size.                |
| `repo-delete`     | `repo-deleted` (deprecated)    | The old name retains its 16px drawing at every display size.                |
| `triangle-circle` | `play` (supported)             | The old name retains both original circled drawings, not the bare triangle. |

Compatibility names retain their exports, CSS classes, symbol IDs, and published `build/svg` paths. An `aliasOf` property identifies the canonical name in icon data; `deprecated: true` separately marks a deprecated alias. Catalogues can filter `aliasOf` entries without removing legacy lookups.

The canonical `bookmark-fill` and `repo-delete` names now provide both natural sizes. JavaScript and Ruby helpers retain their existing 24px output when callers omit width and height; an explicit 16px request selects the 16px drawing.

## Contributing

### Feedback, ideas, and bug reports

If you found a bug, have feedback about our Octicon Library, or an idea on how to improve it, please open a new issue in this repo using the appropriate [issue template](https://github.com/primer/octicons/issues/new/choose).

### Request an Icon Review (GitHub staff only)

To request an icon review for inclusion in the Octicons Library, open the [github/primer issue template chooser](https://github.com/github/primer/issues/new/choose) and select **Icon request**.

### Adding or updating an icon

Read through our [contributing guide](./CONTRIBUTING.md#adding-or-updating-icons) if you want to add or update icons.

## License

(c) GitHub, Inc.

When using the GitHub logos, be sure to follow the [GitHub logo guidelines](https://github.com/logos).

_Code License:_ [MIT](./LICENSE)
Applies to all other files