Icons background - v02.png

Icons

 
 
 

A Visual Language

Icons are simple indicators that help distinguish key actions and strengthen contextual emphasis on the page. Our icon set allows users to navigate tasks and understand concepts with confidence and ease. Clear and concise, these icons work equally well as elements of our user interface and as expressions of our brand.

Our icons have been designed on a precise grid to guarantee consistency,
readability and a crisp look across desktop and mobile displays.

 
 
Mindbody-Icons-Used-v15.jpg
 
 

MINDBODY App

We designed over 40 icons for the app—each one representing a vertical in the health, wellness or beauty industries. The rationale behind our design was twofold: to establish credibility with our understanding of each vertical, and to use relatable, accessible imagery that helps introduce users to new experiences.

The Basics

 

The Grid

All icons maintain a 48-unit measure to preserve sharp edges and correct alignment. Any scaling done to the original will scale the image up or down proportionally.

Strokes

Consistent stroke weights are key in unifying our icons. Maintain 1px width for all interior and exterior strokes, including curves and angles.

Express-Icons-Used-v14.jpg
 

MINDBODY Business

The visual language in our app for businesses must remain functional and universal, but not at the expense of the MINDBODY brand. We took traditional system icons and created a unique set that is true to our essence, aesthetic and audience.

 

Dos and Don'ts

Consistency helps users comprehend icons (and most other elements, too). Use existing icons whenever possible, across all applications.

 
 

On Pixel

Position icons on pixel to keep them crisp—that means the X and Y coordinates are integers and do not contain decimals.

High-DPI Screen

When coding and exporting icons, consider varying screen resolutions and use high resolution icons for high-DPI screens.

Grid Constraints

To keep our icons uniform, always keep them within the 48px grid. When creating a new one, compare with the existing set to ensure that it’s balanced among the rest.

icon-break-2-v4.jpg
 

Download the Full Icon Set

Remember—when using icons on a retina display, use the @2x icon.

Download All Icons

Core Values

Vertical/Industry

Features

Support

Contact Options

MBU Courses

Devices

Other