Icons Overview Our icons are friendly, flat, and minimal. We use a mix of rounded corners and right angles, intentional open lines, and an unfilled outline style to create our easy-breezy vibe.
UI icons symbolize commands, navigation, utility, or common actions. Use icons to reinforce visual context and enhance usability.
Icon Web Component For quick application of Icons to any project, be sure to check out the auro-icon component.
For inclusion with JavaScript based front-end development, due to ESM/SSR support requirements, the legacy file type .js
and the name convention of _es6.js
have been deprecated and will be removed in the next MAJOR release. All users are requested to use the .mjs
file type.
Please see the deprecated icons list for more about these updates.
alert triangle with exclamation mark. error-filled.svg triangle with exclamation mark. error-stroke.svg Important information indicator. information-filled.svg Important information indicator. information-stroke.svg Alert user of option to learn more about relative content. question-filled.svg Alert user of option to learn more about relative content. question-stroke.svg Alert user of troubling or concerning situation. warning-filled.svg Alerts user of troubling or concerning situation. warning-stroke.svg destination Indicates car rental options. car-rental-stroke.svg An outlined flag flag-stroke.svg two rectangles with windows. hotel-filled.svg two rectangles with windows. hotel-stroke.svg A crescent moon with solid fill moon-filled.svg An outline of a crescent moon moon-stroke.svg Two outlined mountains and a sun mountain-stroke.svg Indicates options for transportation. ride-stroke.svg An outlined snowflake snowflake-stroke.svg full circle surrounded with lines. sun-filled.svg semi-circle with lines sun-rising-filled.svg semi-circle with lines sun-rising-stroke.svg full circle surrounded with lines. sun-stroke.svg easybiz two blue rectangles with a white dollar symbol in the middle. contract-fare-filled.svg two blue rectangles with a white dollar symbol in the middle. contract-fare-stroke.svg two gold rectangles with a white stroke in the middle. contract-mixed-fare-filled.svg two gold rectangles with a white stroke in the middle. contract-mixed-fare-stroke.svg rectangle with airplane in the middle and three circles on top. flight-pass-filled.svg rectangle with airplane in the middle and three circles on top. flight-pass-stroke.svg blue dome building. government-fare-filled.svg blue dome building. government-fare-stroke.svg yellow dome building. government-mixed-fare-filled.svg yellow dome building. government-mixed-fare-stroke.svg hazmat Filled icon representing aerosol containers with flammable or pressurized contents hazmat-aerosol-filled.svg Outline icon representing aerosol containers with flammable or pressurized contents hazmat-aerosol-stroke.svg Filled icon representing portable canned fuel or combustible liquids hazmat-canned-fuel-filled.svg Outline icon representing portable canned fuel or combustible liquids hazmat-canned-fuel-stroke.svg Filled icon representing fireworks and other pyrotechnic devices hazmat-fireworks-filled.svg Outline icon representing fireworks and other pyrotechnic devices hazmat-fireworks-stroke.svg Filled icon representing cigarette lighters or similar flame-producing devices hazmat-lighter-filled.svg Outline icon representing cigarette lighters or similar flame-producing devices hazmat-lighter-stroke.svg Filled icon representing lithium batteries and other potentially hazardous power cells hazmat-lithium-batteries-filled.svg Outline icon representing lithium batteries and other potentially hazardous power cells hazmat-lithium-batteries-stroke.svg Filled icon representing loose ammunition or cartridges hazmat-loose-ammo-filled.svg Outline icon representing loose ammunition or cartridges hazmat-loose-ammo-stroke.svg Filled icon representing matches and other fire-starting implements hazmat-matches-filled.svg Outline icon representing matches and other fire-starting implements hazmat-matches-stroke.svg Filled icon representing compressed oxygen tanks, cylinders, or medical oxygen supplies hazmat-oxygen-filled.svg Outline icon representing compressed oxygen tanks, cylinders, or medical oxygen supplies hazmat-oxygen-stroke.svg Filled icon representing small engines containing fuel or oil hazmat-small-engine-filled.svg Outline icon representing small engines containing fuel or oil hazmat-small-engine-stroke.svg health Indicates airflow. air.svg sanitizing spray. clean-filled.svg sanitizing spray. clean-stroke.svg test tube. covid-test-filled.svg test tube. covid-test-stroke.svg face mask. mask-filled.svg face mask. mask-stroke.svg circle with a cross in the middle. medical-filled.svg circle with a cross in the middle. medical-stroke.svg in-flight Indicate boarding options. boarding.svg backpack with front zipper. carry-on-filled.svg Indicate elite passenger status. elite-stroke.svg a rectangle with triangle inside. entertainment-filled.svg a rectangle with triangle inside. entertainment-stroke.svg Indicates additional legroom for First Class cabin. first-class-legroom.svg flight-cancelled-stroke.svg flight-delayed-stroke.svg flight-on-time-stroke.svg Indicates food and drink options. food-and-drink.svg Toilet lavatory-stroke.svg a rectangle with wheels and handle. luggage-filled.svg a rectangle with wheels and handle. luggage-stroke.svg a solid fill coffee or tea mug with a handle. mug-filled.svg an outline of a coffee or tea mug with a handle. mug-stroke.svg circle with two passengers. multipax-filled.svg circle with two passengers. multipax-stroke.svg circle with a single passenger outline. passenger-filled.svg Indication of passenger. passenger-stroke.svg rectangle with two lines plug-filled.svg rectangle with two lines plug-stroke.svg Indicates additional legroom for Premium Class cabin. premium-class-legroom.svg airline seat. seat-filled.svg airline seat. seat-stroke.svg wine glass. wine-and-spirits-filled.svg wine glass. wine-and-spirits-stroke.svg interface Indicates accessible content. accessibility.svg rectangle calendar with a plus sign. add-to-calendar-filled.svg rectangle calendar with a plus sign. add-to-calendar-stroke.svg Directional pointer; down. arrow-down.svg Directional pointer; left. arrow-left.svg Directional pointer; right. arrow-right.svg Directional pointer; up. arrow-up.svg Arrow with line on top back-to-top.svg rectangular calendar. calendar-filled.svg rectangular calendar. calendar-stroke.svg Indication of hyperlink. chain-link.svg two rectangle chat bubble. chat-filled.svg two rectangle chat bubble. chat-stroke.svg a large check mark. checkmark-lg.svg a small check mark. checkmark-sm.svg Directional indicator; down. chevron-down.svg Directional indicator; left. chevron-left.svg Directional indicator; right. chevron-right.svg Directional indicator; up. chevron-up.svg Two layered squares copy-paste-stroke.svg Four filled rectangles arranges inside a square dashboard-filled.svg Four stroke rectangles arranges inside a square dashboard-stroke.svg green clover with a checkmark. discount-code-applied-filled.svg green clover with a checkmark. discount-code-applied-stroke.svg Icon of a piece of paper. document-stroke.svg a dollar sign inside a filled circle. dollar-sign-filled.svg a large dollar sign. dollar-sign-lg.svg a small dollar sign. dollar-sign-sm.svg a dollar sign inside an outlined circle. dollar-sign-stroke.svg Arrow pointing towards surface download.svg a solid pencil and a line. edit-filled.svg an outline of a pencil and a line. edit-stroke.svg Link to external site. This indicates a link to an external site that may not follow the same accessibility or privacy policies as Alaska Airlines. By selecting a partner link you agree to share your data with these sites. external-link-stroke.svg marker sign. filter-filled.svg marker sign. filter-stroke.svg ribbon with a letter 'F'. first-class-upgrade-available-filled.svg ribbon with a letter 'F'. first-class-upgrade-available-stroke.svg a clock ribbon. first-class-upgrade-waitlist-filled.svg a clock ribbon. first-class-upgrade-waitlist-stroke.svg Some short, frequent flights aka 'shuttle flights' allow for free same day changes. free-same-day-change-stroke.svg global-language-stroke.svg Two person filled, one behind other guest-filled.svg Two person stroke, one behind other guest-stroke.svg Indicates favored item. heart-filled.svg Indicates item to be favored. heart-stroke.svg Toggle password visibility. eye with a line in the middle. hide-password-filled.svg Toggle password visibility. eye with a line in the middle. hide-password-stroke.svg rectangle with id silhouette inside. id-filled.svg rectangle with id silhouette inside. id-stroke.svg Pointer of specific location. location-filled.svg target circle. location-finder.svg target circle with a dot in the center. location-found.svg Closed lock. lock-filled.svg Closed lock. lock-stroke.svg A guest will be in different cabins for different segments of the trip. mixed-cabin-itinerary.svg Circle with three dots inside it more-filled.svg Circle with three dots inside it more-stroke.svg Link will open a new tab or window. Notice indicator to alert users that action will result in the browser opening a new tab or window. new-window-filled.svg Link will open a new tab or window. Notice indicator to alert users that action will result in the browser opening a new tab or window. new-window-stroke.svg red frown face. not-recommended-for-standby-filled.svg red frown face. not-recommended-for-standby-stroke.svg a bell with red dot. notification-active-filled.svg a bell with red dot. notification-active-stroke.svg a bell. notification-filled.svg a bell. notification-stroke.svg rectangle phone phone-filled.svg rectangle phone phone-stroke.svg A pin pointing downwards filled in. pin-filled.svg A pin pointing downwards outlined. pin-stroke.svg drop pin with circles. pin-trip-filled.svg drop pin with circles. pin-trip-stroke.svg Indicates plus option. plus-filled.svg Indicates plus option. plus-stroke.svg purple start with a letter 'P'. premium-class-upgrade-available-stroke.svg gold start with watch face. premium-class-upgrade-waitlist-filled.svg gold start with watch face. premium-class-upgrade-waitlist-stroke.svg a printer. printer-filled.svg a printer. printer-stroke.svg Person inside circle profile-filled.svg Person inside circle profile-stroke.svg Indicates availability of a QR code. qr-code-stroke.svg green smiley face. recommended-for-standby-filled.svg green smiley face. recommended-for-standby-stroke.svg Viewable by travelers with guest passes to fly standby - this route has a medium chance of standby availability. recommended-for-standby-travel-but-monitor-stroke.svg yellow neutral face. recommended-for-standby-travel-but-watch-filled.svg Calendar with airplane reservation-filled.svg Calendar with airplane reservation-stroke.svg dome building. route-pending-government-approval.svg magnifying glass with dark circle in the middle. search-filled.svg magnifying glass with dark circle in the middle. search-stroke.svg a cog gear. settings-filled.svg a cog gear. settings-stroke.svg Airline ticket ticket-filled.svg Airline ticket ticket-stroke.svg Open lock. unlock-filled.svg Open lock. unlock-stroke.svg Toggle password visibility. eye. view-password-filled.svg Toggle password visibility. eye. view-password-stroke.svg Indicates close action. x-filled.svg Indicates close action. x-stroke.svg partnership Alaska and Clear partnerhip clear.svg Alaska and Lyft partnership. lyft.svg payment Alaska Credit Card. cc-alaska.svg Amex Credit Card. cc-amex.svg Discover Credit Card. cc-discover.svg Mastercard Credit Card. cc-mastercard.svg Visa Credit Card. cc-visa.svg credit card. credit-card-filled.svg credit card. credit-card-stroke.svg programs Alaska Airlines Club 49 program club49.svg shop a shopping cart. cart-filled.svg a shopping cart. cart-stroke.svg gift box with a bow. gift-filled.svg gift box with a bow. gift-stroke.svg receipt paper. receipt-filled.svg receipt paper. receipt-stroke.svg shopping bag with a handle. shopping-bag-filled.svg shopping bag with a handle. shopping-bag-stroke.svg social Facebook social media icon. facebook.svg Instagram social media icon. instagram.svg LinkedIn's logo linkedin.svg X (formerly Twitter) logo x-social.svg Youtube's logo. youtube.svg terminal Indicates arrival to destination. arrival-filled.svg Indicates arrival to destination. arrival-stroke.svg Indicates boarding pass options. boarding-pass-filled.svg Indicates boarding pass options. boarding-pass-stroke.svg Indication to check-in here. check-in-stroke.svg Indicates a point of departure. departure-filled.svg Indicates a point of departure. departure-stroke.svg Indicates a diversion of original intent. diverted.svg Find flight details here. flight-details.svg Represents the Alaska Lounge or partner lounge access. lounge-stroke.svg indication of one way flight option. one-way-arrow.svg indicate round-trip flight option. round-trip-arrows.svg © Copyright 2019-present Alaska Airlines, inc. All rights reserved.