Call Us (505) 280-9044West Valley City, UT2185 S. 3270 W. Switch Color Themes
Everything at your fingertips

Iconography Patterns

This guideline shows all available icons for Zionsbancorp Wep Applications with direction on how and when to use them. They’re designed to create a consistent look across all digital platforms.

Overview

Our icons have many meanings and can be used to illustrate action, status and identity.

This page displays 9 icon sets, with over 200 icons in total. They range from Core Icons like the External Link icon, to product icons for Weather, Sport and Travel.

An example of some of our icons and their purpose.An example of some icons and their purpose.

Core

An example of our Core icon set. An example of a Core icon set.

Platforms

An example of our Platforms icon set. An example of a Platform icon set.

Audio and Visual

An example of our Audio & Visual icon set.An example an Audio and Visual icon set.

Content Types

An example of our Media Types icon set. An example of a Media Type icon set.

Controls and Devices

An example of our Controls and Devices icon set. An example of a Control and Device icon set.

Social, Personalisation and Service

An example of our Social, Personalisation & Service icon set. An example of a Social, Personalization and Service icon set.

Sport

An example of our Sport icon set. An example of a Sport icon set.

Travel

An example of our Travel icon set. An example of a Travel icon set.

Weather

An example of our Weather icon set. An example of a Weather icon set.

Rules for using icons

Only use icons when there’s a clear need for them. And be sure to use them with the correct text label.

Only use icons as intended, as shown above. This will help to make them more understandable over time.

Sizing

The icons have been designed at 13px and 32px in light and dark colours.

Spacing and positioning

Always give the right amount of space around the icon to allow for legibility and touch. Wherever possible, size your spacing in multiples of 4 or 8 pixels.

Icons should appear to the left of their respective labels.

Example spacing and positioning of our iconography.Example spacing and positioning of our iconography.