Octicons icon library available in multiple languages
Octicons are available in Ruby, Jekyll, JavaScript, React, and Styled System packages.
icon
14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Icon usage guidelines
Icons are most appropriate for representing simple, recognizable concepts or actions. Guidelines: (1) Use icons to supplement text rather than replacing it where possible. (2) Ensure icon meaning is clear when used without accompanying text. (3) Choose icons that are easy to recognize and accurately depict the concept or action. (4) Maintain consistency in icon use across the product or brand. (5) Avoid icons for complex or abstract concepts that may confuse users. (6) Adhere to predetermined icon sizes for legibility and recognition. (7) Test icon effectiveness with users to ensure they are understood and useful.
Icons should use functional foreground colors
To ensure icons are effective and legible in different color modes, use functional foreground colors. Many components automatically set icon color to a predetermined color such as matching role colors by default.
Specific icon colors and usage
Certain icons should always be shown in specific colors within specific contexts: info icon uses fg.accent (#0366D6) for important information; check icon uses fg.success (#22863A) for successful, passing, or positive results; x icon uses fg.danger (#D73A49) for error, danger, or negative results; alert icon uses fg.attention (#B08800) for warnings.
Git and repository-related icon colors
Specific Octicons have predefined colors for their context: git-commit uses fg.muted for individual or groups of commits; issue-opened uses fg.success for newly opened issues; issue-closed uses fg.done for done/closed issues; issue-reopened uses fg.success for reopened issues; issue-draft uses fg.muted for draft issues; git-pull-request uses fg.success for new unmerged pull requests; git-pull-request-closed uses fg.danger for closed unmerged pull requests; git-pull-request-draft uses fg.muted for draft pull requests; git-merge uses fg.done for merged requests; repo uses fg.muted for public repositories; repo-locked uses fg.attention for private repositories.
Branding icon colors
Branding icons mark-github and logo-github use fg.default color and should follow GitHub brand guidelines.
Icon color override for dark backgrounds
Icon color should not be changed from the predefined color variable unless placed on colorful or dark backgrounds like buttons. In such cases, the fg.onEmphasis color can be used.
Octicon sizes
Octicons are available in three sizes: 12px, 16px, and 24px. Icons must be used only at their designated sizes to maintain consistency in stroke width and legibility.
12px icon usage
The smaller set of 12px icons is available for specific, condensed user interface contexts. These include: alert-fill for cautionary messaging or actions requiring attention; check-circle-fill for positive messaging indicating successful action or completion; no-entry-fill to indicate ending or blocking; x-circle-fill for negative messaging indicating errors or unavailable actions; chevron-down to indicate a collapsible section is open; chevron-right to indicate a collapsible section is closed.
Maintain original icon size
Icons should be kept in their original size to maintain visual consistency, legibility, and accessibility. Resizing icons should be avoided as it can distort stroke width and visual appearance.
System vs user-selectable icons
System icons represent core actions and concepts within the user interface and are used consistently throughout the product as part of the visual language, such as trash icon for deleting or plus-circle for adding. User-selectable icons allow users to customize their experience or make personal connections with the product and are typically less central to functionality. At GitHub, emojis are used as user-selectable icons as they are widely recognized, visually distinct from system icons, and effectively convey emotions or personality.
Do not use Octicons as user-selectable icons
Using Octicons as user-selectable icons is strongly discouraged as it could create a confusing experience when used in the wrong context. For example, a user could pick an issue-closed icon and label it 'In progress', creating confusion between the icon's system meaning and user assignment.
Icon states using outline and fill versions
To display the state of an action, use a stroke and fill icon combination or its opposite version if available. For 'off' or 'empty' states, use the outline icon.
Predefined icon state pairs
Icon state pairs include: heart / heart-fill for sponsor / sponsoring; star / star-fill for star / unstar; check-circle / x-circle-fill for pass / fail; file-directory-open-fill / file-directory-fill for directory open / directory closed.