Use octicons to symbolize metaphors and actions common to GitHub. When using octicons keep the following principles in mind:
For most components, icon color has been set using our functional color variables.
Some use cases allow for icons to be paired with a specific color based on the intended function. Use the table below as a reference.
|icon-info||Used to indicate important information|
|icon-success||Used to indicate a successful, passing, or positive result|
|icon-danger||Used to indicate an error, danger, or negative result|
|icon-warning||Used to indicate warning|
Octicons are available in two sizes: 16px and 24px. They should only be used at their dedicated sizes to maintain consistency in stroke width and legibility.
Scaling icons from their original size is not permitted.
Certain octicons are intended for a specific use case. Refer to the table below for icons with specific guidelines.
|Pull requests||The |
|Repos||A repository in GitHub is represented as a closed book and is explicitly named as |
|Octoface||Represents the user. Conveys connection between GitHub and the user. Similar to the myOctocat generator.|
|GH mark||Brand logo use only. Follow GitHub's brand guidelines when using this octicon.|
By default, all octicons use an outline style. Some icons have a filled version which should be used only under the following conditions:
Use a filled icon to aid in contrast when in relation to another icon
Use a filled icon to indicate navigation state in GitHub's native mobile apps
The state of an action can be displayed either by using a stroke and fill icon pairing or using a slash version of an icon if available.
Use the outline icon for the "off"/"empty" state and the fill icons for "on"/"filled" states.
The exception to this rule is when conveying a "pass"/"fail" pairing which is done using the filled version of the
Use outline and fill pairings to show the state of an action
Use outline and fill pairings to indicate the status or completion of an action (for example, an action running)
Specific icons have a stateful pair using a slash to indicate the "off/empty" state. Use these when indicating that an action is removing or disabling a function.
The save and subscribe action buttons in notifications are special cases where a slash version of the icon is used for the "off"/"empty" state.