Icons

Icons are bundled and managed through a font-family (think 'wingdings') -- this allows designers to change colours and size through CSS and they will stay sharp regardless of how much they are enlarged. The library will grow and change with Swoop's product offerings.

Icomoon is the tool used to manage icons

\e901

Alert

e.g. use to signify errors on form validation

\e90c

Arrow-right

e.g. reinforce call-to-actions and links

\e916

Baggage

General representation of actions related to baggage

\e91f

Bags Personal

Personal item baggage

\e926

Bags Carry

Carry on bags

\e927

Bags Checked

Checked bags

\e910

Boarding pass

Only to be used when linking to boarding pass

\e919

Book flight

Only to be used when linking to a book a flight widget

\e902

Calendar

e.g. indicate that a date-picker control will be opened

\e90b

Check

Affirm actions

\e91d

Announce

Announcements, news, and other press releases

\e911

Check in

Only to be used when linking to the check in flow

\e906

Chevron up

e.g. show that a drop down menu is active

\e903

Chevron down

e.g. mark a control as a drop down menu

\e904

Chevron left

e.g. go to the previous month on date-picker control

\e905

Chevron right

e.g. advance to next month on date-picker control

\e90d

Close

Used to dismiss dialogs or on negative actions

\e91b

Contact

Only to be used when linking to the contact us page

\e914

Fares

Used when talking about ultra-low-fares

\e91e

Email

e.g. subscribe to FlySwoop.com email offers

\e8f6

External link

For when we link to external pages that might not meet WCAG

\e928

Extras

Used when talking about extras

\e90f

Flight status

Only to be used when linking to the flight status flow

\e92c

Help

If there is a question e.g. like a FAQ

\e929

How

Used when explaining 'how it works'

\e91c

Insurance

For when we have insurance

\e913

Internet

Used when talking about on-board internet service

\e922

Logo

For places where we don't want to use the full logo

\e923

Logo borderless

For places where we don't want to use the full logo

\e915

Manage

Only to be used when linking to the manage flow

\e907

Map pin

e.g. Used to indicate origin and destination fields on a form

\e91a

Meals

e.g. Buy on board meals and snacks

\e908

Menu

e.g. Mobile hamburger menu

\e909

Minus

e.g. Decreasing the amount of adult travelers

\f09d

Payment

Payment steps or information around payment

\e918

Pets

If we need to talk about pets

\e912

Planes

Used when talking about Swoop's modern fleet

\e90a

Plus

e.g. Add more adult travelers

\e90e

Profile

The default avatar when referring to a traveler's profile.

\e92a

Secure

Indicates that something is safe and secure e.g. https://

\e925

Seats

e.g. Linking out to seat selection option

\f09a

Social Facebook

e.g. linking to Swoop's Facebook page

\f16d

Social Instagram

e.g. linking to Swoop's Instagram page

\f099

Social Twitter

e.g. linking to Swoop's Twitter page

\e924

Tip

e.g. purchases seats early and save up to 20%

\e8f4

Travel documents

e.g. page on required travel documents

\e917

Traveller

Different than a Profile this is a passenger type

\e934

Wind

\e935

Side Seat

\e938

Seat Back

\e937

Power Button

\e9365

Mute Speaker

\e801

Address

\e802

Edit Profile

\e804

Password

\e805

Wallet

\e800

New checkin

\e803

Onboard

\e806

Accessible services

\e807

Making flight changes

\e808

My flight was cancelled

\e809

Cancelling my flight

\e80a

Missed flight