05.1 / Iconography

05.1 / Iconography
A consistent system
All of the icons shown on these pages are displayed on corresponding background colors. One or more backgrounds are shown where applicable. Icons should be reversed out on all colors except yellow.
For more specific information about color, please see the color section.

Icon library
The icon family has been designed to assist our users with a quicker navigation throughout the site. Each icon has been carefully thought out and strategically placed to best represent the products and offers of our company. The set sizing of the icon family are:
– Title icon: 32px
– Header icon: 24px
– Info icon: 16px
– In-Line icon: 12px

The only time icons should be used in full color is when they are an alert or are informative to a particular selection. Color icons are not product based.

Home Page modular icons
Flight Status icon in white
Flight status
Check-in icon in white
Check in
Traveler icon
Traveler
Book Travel icon in white
Book travel
Rental Car icon in white
Rental car
Hotel icon in white
Hotel
My Trips icon in white
My trips



Home Page action icons
Upgrade icon in white
Upgrade
Seats icon in white
Seats
Standy-By icon in white
Stand-by
Amenities icon in white
Amenities
Share icon in white
Share
Print icon in white
Print
Edit/Customize icon in white
Settings, customize
Upgrade icon in white
Upgrade
Seats icon in white
Seats



Home Page Weather Icons
Snow icon

Snow
Snow icon

Sun
Snow icon

Clear
Snow icon

Thunderstorms
Snow icon

Cloudy
Snow icon

Showers
Snow icon

Scattered showers
Snow icon

Blowing snow
Snow icon
Partly cloud day
Snow icon
Partly cloudy night
Snow icon
Fog
Snow icon
Sun & snow
Snow icon
Windy
Snow icon
Scattered showers night



Icon Family
Traveler icon
Traveler(s), my account
Aircraft icon
Booking flight, aircraft
Baggage icon
My trips, baggage
Traveler icon
Flight status
Check In icon
Check in
Home icon
Home
Rental car icon
Rental car
Hotel icon
Hotel
Vacation icon
Vacation
Cruise icon
Cruise
Search icon
Search
Language icon
Language
Cart icon
Cart
Calendar, dates icon
Calendar, dates
Traveler icon
Seats
Traveler icon
Settings, customize
Traveler icon
Entertainment, movies
Traveler icon
Meals
Traveler icon
Beverage
Traveler icon
WiFi
Traveler icon
In-seat power
Traveler icon
Special needs
Traveler icon
Restrooms
Traveler icon
DirecTV
Traveler icon
Boarding pass
Traveler icon
Standby list
Traveler icon
Pets
Traveler icon
Infant
Traveler icon
Print
Traveler icon
Download
Traveler icon
FareLock
Traveler icon
Email, send
Traveler icon
Closet
Traveler icon
Download file
Traveler icon
Download folder
Traveler icon
Headphones
Traveler icon
Mouse
Traveler icon
Edit
Traveler icon
Heart
Traveler icon
MileagePlus



Icon Family
Maps icon
Maps
Geo-Location icon
Geo-location
Ground Transportation icon
Ground transportation
United Club icon
United club
Credit cards, gift card icon
Credit card, gift card
T.V. icon
T.V.
Music icon
Music
Phone icon
Phone
Extra Legroom icon
Extra legroom
Register icon
Register
Golf icon
Golf
Share icon
Share
Gift registry icon
Gift registry
Trip Assist icon
Trip assist
Add Travelers icon
Add traveler(s)
Add Pets icon
Add pet(s)
Childseat icon
Childseat
Ski boots icon
Ski boots
Ratings icon
Ratings



In-Flight Entertainment Icons
Demand icon
Demand
Personal Device Entertainment icon
Personal device entertainment
On-Demand Entertainment icon
On-demand entertainment
Live TV icon
Live tv



Notification Icons
Whats This? Help icon
What’s this? help
Information icon
Information
Alerts icon
Alerts
Upgraded icon
Upgraded
Waitlisted icon
Waitlisted
Checked In, Cleared Messaging icon
Checked In, Cleared Messaging
Checked In, Cleared Inline icon
Checked in, cleared inline
Unavailable No icon
Unavailable no
Whats This? Help icon
What’s this? Help
Information icon
Information
Alerts icon
Alerts
Upgraded icon
Upgraded
Waitlisted icon
Waitlisted
Checked In, Cleared Messaging icon
Checked in, cleared messaging
Checked In, Cleared Inline icon
Checked in, cleared inline
Unavailable No icon
Unavailable no



Weather icons
Flurries, Snow Showers icon
Flurries, snow showers
Sunny icon
Sunny
Clear icon
Clear
Heavy Snow, Blizzard icon
Heavy snow, blizzard
Mostly sunny icon
Mostly sunny
Mostly clear (night) icon
Mostly clear
Rain, Snow, Wintery Mix icon
Rain, snow, wintery mix
Partly cloudy (day) icon
Partly cloudy (day)
Partly cloudy (night) icon
Partly cloudy (night)
Blowing Snow icon
Blowing Snow
Mostly cloudy (day) icon
Mostly cloudy (day)
Mostly cloudy (night) icon
Mostly cloudy (night)
Rain, showers, drizzle icon
Rain, showers, drizzle
Scattered Showers (day) icon
Scattered showers (day)
Scattered showers (night) icon
Scattered showers (night)
Heavy Rain icon
Heavy rain
Scattered T-Storms (day) icon
Scattered t-storms (day)
Scattered T-Storms (night) icon
Scattered t-storms (night)
Strong Thunderstorms icon
Strong thunderstorms
Scattered Snow Showers (day) icon
Scattered snow showers (day)
Scattered Snow Showers (night) icon
Scattered snow showers (night)
Mixed Rain Sleet Hail icon
Mixed rain, sleet, hail
Cloudy icon
Cloudy
Breezy Windy icon
Breezy windy
Sleet Freezing Rain Drizzle icon
Sleet, freezing rain, drizzle
Dust, Fog, Haze, Smoke icon
Dust, fog, haze, smoke
Hurricane icon
Hurricane



Maximum vs. minimum
Whenever possible, icons should be used in one of two established sizes – 24 or 16px. In rare instances when an inline icon is required, the absolute minimum size should be no smaller than 12px in height to ensure readability and consistency.
24 pixel icon
16 pixel icon


Title icon examples
Title Icon – 32 Pixel (usually the first bit of information on the page at the very top), 12px separation between the icon and the text.

There are no flights that fit within the time frame you requested. Open Sans Light 20pt, #333333


You have been placed on the upgrade waitlist. Open Sans Light 20pt, #333333


null

You have been placed on the upgrade waitlist. Open Sans Light 20pt, #333333


Title Icon – 24 Pixel (usually informative related to sections and/or offers), 10px separation between the icon and the text.

There are no flights that fit within the time frame you requested. Open Sans Light 20pt, #333333


You have been placed on the upgrade waitlist. Open Sans Light 20pt, #333333


null

There are no flights that fit within the time frame you requested. Open Sans Light 20pt, #333333


null

You have been placed on the upgrade waitlist. Open Sans Light 20pt, #333333


Title Icon – 16 Pixel (usually within the page, separating sections), 10px separation between the icon and the text.

There are no flights that fit within the time frame you requested. Open Sans Regular 12pt, #666666


You have been placed on the upgrade waitlist. Open Sans Regular 12pt, #666666


A consistent language
Utilizing a consistent language across all of our iconography is important to ensure a cohesive aesthetic throughout the United digital experience. Following these guidelines when creating new iconography will result in a strong system of icons and coherent communication.
Icon creation rules
Correct Plug Icon Geometric vs. organic
Whenever possible, icons should be created using simple geometric shapes. This approach helps to create a sturdy collection of icons and reinforces consistency.
Correct Plug Icon Simplified vs. detail
Icons should be reduced down to their most simplified form that still allows for effective communication. This includes eliminating any type of perspective to maintain a flat form.
Correct Plug Icon Straight line vs. rounded
With the exception of circles, all edges should be hard rather than soft. Hard edges convey straightforwardness and when used consistently, help to create a cohesive system. In certain cases this rule can be bent but only when a soft edge is crucial to the communication of the icon.
Correct Plug Icon Flat vs. dimensional
In keeping with the simplified, approach, icons should never appear to have dimension, shadows or gradients. They should remain flat and minimal to keep consistency to the overall design and feel of the site.


Available Assets Use the links below to access the available files for the assets referenced on this page.