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.
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.
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.
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).
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.
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.
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.
Icons as Buttons
For icons in or as buttons, see button documentation.
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.
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.
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.
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.
For icons as React components, head to Uniform-UI-Components GitHub.
A Sketch file with the starter set of icons used to design Hudl interfaces.
More icon sets will be added soon. Stay tuned.