Our mobile apps use GitHub's icon system, Octicons. Octicons come in two sizes, 16px and 24px.
Star the Octicons repo to follow along with the Octicons project. Open issues and pull requests to get support or ask for new icon additions to the system.
In the Mobile Design Toolkit we have two functional icon colors:
iconSecondary. Each of these colors implements a different brightness of gray, adding visual prominence to more important or actionable icons. But when should you use either of these colors? And when should an icon be gray versus our blue
In general, an icon should be blue if it is:
We strive to use as few
link tinted elements in a content view in order to draw attention to only the most important actionable interface elements. Adding too many blue buttons and icons dilutes the power of the color as a way to draw attention.
|On the repo profile, we follow our rules that nav bar iconography is |
|In the triage sheet, the primary purpose of this sheet is to manage assignees for a given issue. Because the purpose of this view is to manage (or more likely, to add) assignees, we make the |
Generally, an icon could be filling one of four roles:
Generally, important actionable elements and primary supporting graphics should use
iconPrimary, while unimportant actionable elements and decorative accessories use
Let's look at some examples:
|The header metatdata icons are unimportant decorative accessories, and not actionable, so we tint them |
|The accessory icons are not actionable, and not important decorations, so they are tinted |
|The branch icon in the code browsing section header is an unactionable accessory tinted |
|The commit icon is an important accessory, despite not being actionable, so it is tinted |
|The search typeahead icons are important supporting accessories to quickly distinguish the typeahead options, so they are tinted |
|The remove buttons when editing favorites are actionable, but not the primary action on this view, so they are tinted |
It's possible for icons to be other colors besides gray and blue! For example, we use yellow star icons to indicate that you, the viewer, have starred a repository. We also use green eye icons to indicate that you are watching a repository. You might also find pink hearts when working with sponsors. And of course, we use green, red, and purple as issue and pull request icon tints to represent states (open, closed, merged).
|In this example, the Star button gets a gray label and yellow icon to communicate the state of the viewer's relationship to this repository. The gray label de-emphasizes the button, because un-starring is a generally undesirable action.|
|The state of the PR where this commit was created is tinted purple to indicate the PR was merged, therefore this commit was merged, too.|