Iconography

In general, icons are visual symbols that represent ideas, objects, or actions. USANA Studio's leads the creation, iteration, and updating of all icons and icon styles. For any custom iconography work, please first look at Font Awesome to see what icons can be found there.

With lots of negative space and big rounded corners, we have designed USANA's iconography to be simple, engaging, and clear. We're currently using filled icons since they tend to communicate more clarity and importance. Filled icons, like bold fonts, are generally bolder and have a greater tendency to catch a user's eye.

Types

Accessibility

Accessible
Audio Description
Braille
Closed Caption
Deaf
Low Vision
Phone Volume
Sign Language
TTY
Universal Action
Wheelchair

Action

+
Action
Add Box
Audio Description
Bank
Build
Business
Clipboard
Code
Compare
Complete Order
icon-coupon
Coupon
icon-couponchina
Coupon China
Database
Date
Description
Download
Event
Excel
Favorite filled
Favorite border
icon-feedback
Feedback
Filter
Folder
Gift
Hide
Home
Image file
Insert chart
Key
List bullets
List Numbers
Lock
Paperclip
PDF
Power
Power Point
Print
Remove
Remove border
Returns
Save
Search
Settings
Shipping Address
Shopping cart
Shopping cart add
Stars
Tag
File invoice
Thumbs Up
Thumbs Down
Time
Trash
Upload
Video file
View
Voice
Wallet
Word
Palette
Party
Party
Zoom in
Zoom out
Microscope
Mortar-pestal
Gauge
Folder tree
Capsules
Flask
Earth (Americas)

Audio

Fast Forward
Rewind
Pause
Pause border
Play
Play filled
Play outline
Volume down
Volume mute
Volume off
Volume up

Communication

Chat
Credit Card
Email
Lead
Phone
Share

Content

Education
Equalizer
Flag
Layers
Link
Money
Trophy

Device

Alarm
CSR
Device
Display
Hard Drive
Headphones
Keyboard
Laptop
Microphone
Mobile
Mouse
Phone (Device)
TV
Video

Editor

Quote Left
Quote Right

Image

Camera
Edit
Image
Photo add
Portrait

Navigation

Arrow down
Arrow right
Arrow left
Arrow up
icon-categories
Categories
Check
Checkbox
Chevron down
Chevron left
Chevron right
Chevron up
Close
Close circle
Dropdown arrow
Dropdown down
Dropdown up
External link
Fullscreen
Fullscreen exit
Level down
Level up
Location
Menu
More horizontal
More vertical
Progress (circle)
Refresh
Unfold less
Unfold more

Notification

Alarm
Battery Empty
Battery Full
Battery Half
Do Not Disturb
Error
Event Accepted
Information
Question
Warning
Wifi
Notification

Social

User
User add
User circle
Users
Users add

Toggle

Blank Box
Blank Radio
Filled Radio
Intederminate
Star border
Star full
Star half
Star half border

Video

Library
Subscriptions

Emoji

Angry
Gleeful
Happy
Ok
Sad
Smile
Wink
icon-angry-color
Angry color
icon-gleeful-color
Gleeful color
icon-happy-color
Happy color
icon-ok-color
Ok color
icon-sad-color
Sad color
icon-smile-color
Smile color
icon-wink-color
Wink color

USANA Brands

USANA
icon-whatsupusana
BabyCare
icon-askthescientist
Askthescientist
icon-whatsupusana
Whats Up Usana
icon-usanafoundation
Foundation

Body Benefits

icon-bonehealth
Bone Health
icon-brainhealth
Brain Health
icon-detox
Detox
icon-digestivehealth
Digestive Health
icon-eyehealth
Eye Health
icon-healthyenergy
Healthy Energy
icon-healthyliving
Healthy Living
icon-healthyweight
Healthy Weight
icon-hearthealth
Heart Health
icon-immunehealth
Immune Health
icon-menshealth
Men Health
icon-skinhealth
Skin Health
icon-totalbodyhealth
Total Body Health
icon-womenhealth
Women Health

Other Brands

Figma
Webflow
Amazon
Apple
Google
Android
Wordpress

Social Media

Facebook Black
Facebook
Facebook Grey
Facebook white
Intagram
LinkedIn
LinkedIn black
Snapchat
Pinterest black
icon-pinterest
Pinterest
icon-WeChat
WeChat app
icon-WeChatgreen
WeChat green
WeChat dark grey
icon-WeChatgrey
WeChat grey
icon-WeChatwhite
WeChat white
X
X squaure
icon-youtube
YouTube
YouTube black
YouTube square

Payment

icon-americanexpress
American Ex
icon-aecard
AE card
icon-diners
Diners Club
Diners Club - solid
icon-dinerscard
Diners Club card
icon-discover
Discover
icon-discovercard
Discover card
Discover- solid
icon-mastercard
MasterCard
MasterCard- solid
icon-mastercardcard
MasterCard card
icon-visa
VISA
VISA- solid
icon-visacard
VISA card
icon-paypal
PayPal
PayPal- solid
icon-paypalcard
PayPal card
icon-lg
LG
icon-hyundai
Hyundai Card
icon-applepay
Apple Pay
Apple Pay - solid
Amazon
Amazon
icon-ccup
CCUP
icon-eft
EFT
icon-im
IM
icon-jcb
JCB
JCB

Guidelines

Layout

By default, icons are displayed on a 24px x 24px pixel grid. The icons should be centered horizontally and vertically on the pixel grid.

Canvas
24 x 24 px is the default size for icons and should be designed at 100% scale.

icon-layout_canvas

Padding
2px padding needs to surround the live area. 2px can be ignored if dealing with a brand or trademark.

con-layout_padding

Live area
The live area is for the icon is limited to a 20px x 20px live area, with a perimeter of 2px.

con-layout_livearea

Keylines

Key-lines allow shapes like circles, squares, and rectangles to be specified in terms of their size. Based on Materials key lines, they will change as USANA develops its icon library.

Circle

icon-keylines_circle

Square

icon-keylines_square

Rectangle (vertical)

icon-keylines_rectanglev

Rectangle (horizontal)

icon-keylines_rectangleh

Spacing & Text Targets

Spacing
Ensure that spacing between icons and text meets the rules of 8.

icon-spacing

Text Targets
Icons need to have a tappable area of at least 40px for interactive components.

icon-targets

Sizes

Icons are created using 24px art boards. Additionally, icons must be viewable at 16px, 48px, and 96px. Other sizes may be utilized, but they must be consistent with the design's content and layout.

icon-sizes
Do
  • Use  in a purposeful manner to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section.
  • In combination with meaningful text to support users progressing through the product in an accessible manner. 
  • To help users who have difficulties with reading and attention.
  • In places where text label doesn’t fit.
Don't
  • Scale icons to fit your designs. This can cause the proportions to be off-balance and can create unintended hierarchy within the experience.
  • Make icons overly complicated.
  • Don’t use unapproved shapes.
  • Avoid when a button’s action is already clear based on a text label alone.