Iconography

Like most digital products, we rely on icons to imply action. Icons are a visual shortcut for quicker understanding, act as action affordances or provide efficiency in space for dense or minimal interfaces.

Our primary icons are single color filled glyphs. These icons are presented in the simplest possible shape while maintaining a consistent visual weight and style with other icons.


Style

Our iconography style relies on our personality traits: smart and reliable.

This icon style can described as “approachable utilitarian”. Clear meaning comes before style. Hard shapes are softened for personality but never gratuitously rounded or bubbly to feel overly playful.

Icon Style


Metaphors

Supporting our predictable design principle, we strive to use industry standard metaphors (cog = settings, pencil = edit).

For unique features where an industry standard has not yet been established, clear is the guiding principle. Icons without an established metaphor should be supported with text.

Icon Metaphors


Sizing

Each icon is created in a 32 pixel by 32 pixel bounding box. To maintain constant optical weight, an icon should be resized using its bounding box (opposed to the edges of the vector content).

Icon Sizing


Optical Weight

The placement and size of the icon in the bounding box is intended to give icons similar optical weight. Icons extremely tall or wide may touch the edges of the bounding box to support consistent optical weight.

Icon Optical Weight

Positioning Icons

Because some icons extend to the edges of the bounding box, a gutter between icons and other elements should be used to avoid visual collisions.


Color

Icons follow the same rules as typography in regard to color. Our standard icons are glyphs and should be filled with a single solid color, presented without shadows and comply to the same accessibility standards as typography.

Icon Color


Icons as Buttons

For icons in or as buttons, see button documentation.


Sports Icons

Our current sports icons are a custom illustrated set. With more visual complexity, they are sized slightly larger in the bounding box than standard icons. They should not be resized smaller than 16px or half the standard size.

Hudl Sports Icons


Device Specific Icons

To maintain a universal design language across all Hudl products, we recommend relying on our standard filled icons for all devices when possible.

However, in some cases a native device icon may be more familiar and specific to a device action. For instance, the iOS system-provided Activity View for sharing is familiar and provides a predictable sharing experience, thus the native “Action icon” should be used.

Set Icons vs Device Specific Icons

Outlined Variations for iOS

In cases where Hudl icons must be placed adjacent to native iOS icons or in a native toolbar, filled versions may cause visual tension with inconsistent optical weight and style. For this reason, an outlined variation of the icon may be used.

Outlined variations should be custom illustrated to maintain the integrity of the icon and match the iOS style. Only a few outlined variations currently exist.

Outlined Variations


Display Icon

Display icon (icons above 64px) can be used as content helping to express an idea or to create visual interest. Display icons are considered illustrations instead of glyphs and may be filled with more than one color. Multicolor illustrations do not yet have defined standards and should be used conservatively. Display icons in product are often used in empty states and other system messaging where visual interest is needed.

Unlike standard icons, display icons do not need an implied action associated. Although Display Icons are not intended to imply specific actions, people may assume the icon is actionable. Thus, the expected action can be applied to even Display Icons.


Work in progress

This icon set is a work in progress. If an icon you need is not yet in our set, you are encouraged to contribute.

Our custom icon set is extended by our Streamline library license. However, icons outside of our designated set are considered “unofficial”. It is recommended you contact a member of the design systems tribe for guidance on selecting an icon.

Questions and comments about iconography should be directed to the Hudl Slack channel: #hudl-ds-uniform.


Implementation

For icons as React components, head to Uniform-UI-Components GitHub.


Uniform Icons

A Sketch file with the starter set of icons used to design Hudl interfaces.


More icon sets will be added soon. Stay tuned.