🟢 Icons

Showmax design system has own set of handcrafted icons. We have balanced visual style of icons to make them fitting to components where we use them. Icons are used mainly as a part of other components that trigger some action (Button, ButtonLink, ...) or provide text information (Input, Alert, ...) to users.

Icons help to give an additional visual hint to users. We allow to use icon solely with no text in the component to express a main action (for example Play or Open menu).

Size

In case you need to use Icon independently on other components use following sizes:

32 px

24 px

16 px

Don't change size of icon included in components defined in design system.

Library

General

Home

Menu Side

Menu Hamburger

Menu Kebab, More, Detail

Close

Chevron Left

Chevron Right

Chevron Down

Chevron Up

Plus, Add

Edit

Delete, Remove

Question Mark

Info

Alert

Calendar

Check, Done, Ready

Link

Select

Email, Envelope, Address

Chat

Phone, Call

Shield, Protection, Security

Parental Control

Settings, Preferences

User, Profile

Language / Localisation

Sign Out

Heart

Search and browse

Search, Browse

Trailer, Preview

Movies, Camera

Series, TV Show, Episodes

Kids, Children

Sport

Sport

(OBSOLETE) Sport

Replaced temporarily by soccer ball

Download

Downloaded, Stored

Star Full, Favorite

Star Empty, Favorite

Lock Locked, Restricted

Lock Unlocked

Notification, Reminder

Notification Off, Reminder Off

Gift, Incentive

Time, Clock

Playback

Play, Watch now

Pause

Stop

Next

Previous

Forward

Backward

Forward, Seek Forward + Time

Rewind, Seek Back + Time

Forward, Seek Forward

Rewind, Seek Back

Subtitles, Audio, Speech

Max Volume

High Volume

Low Volume

Mute

Expand, Enlarge, Maximize

Shrink, Compress, Minimize

Picture in picture

Live Stream

Back (Android)

Back (iOS)

Back (TV)

Cast, Chromecast

Cast (Connected)

Backspace

Share (Android)

Share (iOS)

Share (Web)

Facebook

Instagram

Whatsapp

Twitter

Youtube

-> Specs in Figma