IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Logos

/

Design

Represent Hudl and its products.

When displaying the Hudl logo, or its products, use these icons only.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Icon documentation and examples.

Icons

IconLogoFocus
Logo Focus
IconLogoFull
Logo Full
IconLogoMark
Logo Mark
IconLogoReplay
Logo Replay
IconLogoSideline
Logo Sideline
IconLogoSportscode
Logo Sportscode
IconLogoVolleymetrics
Logo Volleymetrics
IconLogoMarkWyscout
Logo Mark Wyscout

Usage

Product and service logos are as direct and timeless as the Hudl logo itself. Treat them well.

Don't change the colors outside of approved brand variations.

Don'tchange the colors outside of approved brand variations.

Do use brand orange to maintain the integrity of the Hudl brand and its products.

Douse brand orange to maintain the integrity of the Hudl brand and its products.

Don't use product logos to represent an empty state for failed data.

Don'tuse product logos to represent an empty state for failed data.

Do make their purpose clear when representing Hudl or its products.

Domake their purpose clear when representing Hudl or its products.

Platform

platformnotes
Web
  • Stick to the icons above.
Apple
  • Stick to the icons above.
Android
  • Stick to the icons above.