AUG 2017
Background
As the team scaled, it was clear we needed a systematic approach for contributing. I conducted a full site audit revealing a number of issues including inconsistencies across all platforms.
| Client | Industry |
|---|---|
| GitHub | Technology, Internet |
| Role | Deliverables |
|---|---|
| Icon design, Art direction | Documentation, template |
Design considerations
- Define what is considered an icon vs an illustration
- Reconsider icon usage on logged out pages
- Be intentional with color
- Icon types are mixed
- Favicons, App, Feature, and Octicons
- Improve process to contribute
- Documentation
Introduction
Marketing icons are an extension of GitHub’s visual language. Unlike Octicons, which communicate available actions, feature icons are intended to communicate simple ideas. Knowing when to use an icon instead of an illustration can be tricky. Choose content wisely and avoid over-saturating your layout. Icons are useful for parsing extensive amounts of information. When used appropriately, they emphasize content and add hierarchy to any layout.
Commonly uses
- Navigation
- Feature sections
- Announcements
- Supporting text
Grid
Icons are designed on a base-8 grid. Using a pixel-perfect setup makes positioning objects and maintaining consistent visual proportion easy. Most of the system utilizes main dimensions and guidelines. However, there are instances where it’s appropriate to use a different tier.
Patterns
Patterns exist to control and eliminate visual inconsistencies. Below are seven examples to maintain the system.
Each icon contains a combination of primary object(s) and/or supporting elements.
- Primary objects are larger in scale and take up 70%, if not more of the icon. Multiple objects are permitted if it improves clarity and is necessary. (Note: scale will shrink with multiple primary objects.) At times, elements do overlap and are used in either the foreground and background. These might be: avatars, documents, or containers.
- Supporting elements are smaller in scale and are less than a quarter of the design, they might: suggest movement, provide additional details, or be an entirely separate item.
- Organizing objects is made easier with preferred configurations. There are recommended layouts, including position and overlap.
| Perspective, drop shadows, and text should never be used.
Color
At this level of detail, icons are most often designed in one or two color. Anything beyond this would be moving closer to a spot illustration. Gradients and more than two colors are discouraged. While it’s recommended to follow guidelines, there may be circumstances where these do not apply.
- Icons on white or light backgrounds default is blue
- Use white icons on colored or dark backgrounds
Stroke
Icons are universally designed with a 2px stroke. There is no space between objects overlapping. Strokes should be flush against another object. For disconnected strokes, ends need a rounded edge.
Rounded terminals
A 2px radius is the convention, but there are times when it’s okay to break this rule to better communicate the subject:
- Non-geometric shapes
- Ship-it squirrel, backpack
- Hubot
Spacing
Universal padding is set at 4px. Other values have been added to maintain consistency in the set. 3px is used between single strokes (lines of text). Depending on the complexity of each icon, 2px has been used between edges with limited real estate.
Layering
When shapes overlap, the stroke fully extends and is flush. There is no gap. Noted above, there should be at least 4px space between overlapping objects.
Optical balance
This article covers optical effects and demonstrates how to create visually balanced designs. Two objects with the same dimensions don’t always add up to a balanced icon. Depending on weight, size, or composition, breaking the rules may be necessary to achieve consistency.
Contributing
If the existing marketing icon library doesn’t meet your needs, we need to answer the following questions before starting a new project. Please open an issue in the design-systems repo answering as many as you can.
External questions
- What is the goal?
- What are we trying to communicate?
- What type of icon are you looking to create?
- Who is the intended audience?
- Where will it live / fit into the icon ecosystem?
- When does this need to launch? Is it tied a product launch or comms push?
Internal questions
- Are there existing issues or discussions that will help inform?
- Who are the stakeholders? Who will we need sign-off from?
- What are blockers or risks that could prevent this from running smoothly?
Great, now you’re ready to contribute to the system. The process is pretty simple, there’s a few steps before your icon is ready to go.
- Download the illustrator template, this includes guides, padding, colors, and everything you might need.
- Add your artwork and submit for review.
- Once approved, add your icon and update Figma and master sketch file.
- Celebrate, now you’re an icon pro!
Best practices
If you’re thinking about contributing, here are a few pro-tips to get started.
- Make sure you begin with a pixel perfect file
- Reuse as much as possible to maintain aesthetic unity
- Always view your file at 100%
- K.I.S.S. 🙏
Check out the GitHub marketing icons on Primer!