Refine By

Iconography-old

  • Contents:

Icons are graphic elements used to convey the meaning behind an object, idea or action in a concise format. You know what an icon is. We don’t have to tell you this.

When used properly, icons elevate the visual interest (so much prettier!) in an interface, serve as excellent touch points for action, and save space. Use these guidelines to make sure your icons are… iconic.

Guidelines

  • In general, always accompany icons with labels. The few exceptions are:
    • Component-specific controls, like player controls
    • Social media icons
    • Map icons in an interactive map experience
    • Favoriting an item in a list of options within a user’s account, such as favorite hotels and rooms
  • Make special note of icons used in navigation bars. They should always be accompanied by labels. Even in the case of well known icons such as gallery or phone icon
  • Provide screen reader announcements for all icons if they are not accompanied by visual labels and convey meaning
    • The screen reader announcement should communicate purpose for touchable icons that link to a target. For example, a Facebook icon that links to a profile or the “heart” icon
    • In lists that repeat a single icon, ensure the screen reader announcement is contextual to the infromation. A list of hotels could have the announcement: “Select to favorite this hotel”
  • Be sure icons are used in the same context throughout an experience. Don’t use two icons for the same thing. And don’t use one icon for two different things.
  • Icon labels should always be visible, without further interaction from the user.
    • Don’t rely on hover effects to reveal icon labels. Not only does it increase interaction costs, but it also fails to translate well to touch devices.

UI Icons

plus 1

close 1

minus 1

plus 2

 

close 2

 

minus 2

 

search

 

refresh

 

 filters

down carrot 1

up carrot 1

down carrot 2

up carrot 2

down carrot 3

up carrot 3

 

left arrow

 

right arrow

 

info 1

info 2

settings

new window

urgent

urgent 2

 

error

 

success

 
               
   

Amenities Icons

non-smoking

digital key

wifi

parking

breakfast

restaurant

outdoor pool

indoor pool

 fitness center

airport shuttle

reception

resort

executive lounge

room service

spa

lgolf

tennis

pet friendly

business center

meetings

no pets allowed

firearm policy

family friendly