Iconography

Overview

Icons are used for wayfinding. Use easily recognizable forms and keep designs simple. New information requires more thinking and users don't want to spend time figuring things out. Keeping things simple and easily recognizable will attract more attention where it’s needed.

Primary icons

Styling for primary icons
Using bright colours from our colour palette with a 2-tone gradient in the centre.

Do you have a new icon you want to add to this library? Email your request to brandteam@loyalty.com, and a team member will connect with you about next steps.

Secondary icons

Use easily recognizable forms and keep designs simple. Artboard needs to be ## size. Line art stroke needs to be ##. Currently being used to help with wayfinding for categories within the catalogue, or to distinguish different types of actions that a user needs to take (contact us page, perks detail pages).

Styling for secondary icons
Friendly rounded edges characterize our icons. Avoid using sharp edges where possible. Clean lines and simple shapes.

Using icon font - secondary icons

Using the icon font allows for the secondary icons to scale across platforms (mobile, desktop, app) and maintain sharp clarity on retina screens with a small file size.

The tool we're currently using is icomoon.io. An exported JSON file from Icomoon can be downloaded here.

Do you have a new icon to add to this font library?
Email your request to ux@loyalty.com and a team member will connect with you about next steps.

Why isn't there a font for primary icons?
Our primary icons are currently more than one colour. Fonts only work with one colour. In the meantime, use SVGs for primary icons.

am-icon-alert
am-icon-checkmark
am-icon-functional-arrow-left
am-icon-functional-arrow-right
am-icon-functional-arrow-up
am-icon-functional-arrow-down
am-icon-functional-plus
am-icon-functional-minus
am-icon-functional-secondary-close
am-icon-functional-secondary-arrow-down
am-icon-functional-secondary-arrow-left
am-icon-functional-secondary-minus
am-icon-functional-secondary-plus
am-icon-functional-secondary-arrow-right
am-icon-functional-secondary-arrow-up
am-icon-functional-toggle-arrow-left
am-icon-functional-toggle-arrow-right
am-icon-delete
am-icon-store-directory
am-icon-popular-stores
am-icon-deals-offers
am-icon-how-it-works
am-icon-check-in-challenge
am-icon-partners
am-icon-shopping-list
am-icon-dream-rewards
am-icon-in-store-cash-rewards
am-icon-search
am-icon-sign-out
am-icon-inbox
am-icon-transactions
am-icon-about
am-icon-account-lock
am-icon-set-balance
am-icon-inbox-unopened
am-icon-inbox-opened
am-icon-turn-device-to-zoom
am-icon-shop-in-store
am-icon-scan-for-mobile
am-icon-print
am-icon-print-secondary
am-icon-desktop
am-icon-tip
am-icon-calculator
am-icon-sweep-stakes
am-icon-events-attractions
am-icon-merchandise
am-icon-travel
am-icon-in-store-cash-rewards2
am-icon-online-cash-rewards
am-icon-charity-platform
am-icon-photography
am-icon-entertainment
am-icon-computer-tablets
am-icon-communications
am-icon-accessories
am-icon-stage-pass
am-icon-exclusive-events
am-icon-canada-fun-attractions
am-icon-usa-fun-attractions
am-icon-spas
am-icon-skis
am-icon-golf
am-icon-cooking
am-icon-dining
am-icon-beverages
am-icon-appliances
am-icon-travel-insurance
am-icon-package-vacation
am-icon-hotel
am-icon-cruises
am-icon-car-rental
am-icon-home-care
am-icon-home-decor
am-icon-outdoor
am-icon-tools-automotive
am-icon-pets
am-icon-countertop-appliances
am-icon-chefs-tools-table-setting
am-icon-pots-pans
am-icon-coffee-beverages
am-icon-gift-card-zone
am-icon-active-lifestyle
am-icon-personal-care
am-icon-fashion-accessories
am-icon-luggage-bags
am-icon-kids-baby
am-icon-hobbies-collectable
am-icon-orders
am-icon-fb-logo
am-icon-twitter-logo
am-icon-theatre-icon
am-icon-shape
am-icon-perks-key
am-icon-in-store-icon
am-icon-mangemyaccount-icon
am-icon-home-improvement-icon
am-icon-help-centre-where-can-i-fly
am-icon-help-centre-update-profile
am-icon-help-centre-reset-create-pin
am-icon-help-centre-recent-transactns
am-icon-help-centre-my-travel
am-icon-headphones-icon
am-icon-grocery-icon
am-icon-gold-program-icon
am-icon-get-rewarded-icon
am-icon-cc-icon
am-icon-transfer-icon
am-icon-online-icon