UX Tip #1: Icons in colored containers

This quick little tip has been a design trend in recent years, and for good reason.

Pro tip: Add visual depth to your interface by using colored containers for your icons.

This has been a trending design pattern in recent years, and it’s a very easy way to make icons more prominent, balanced and consistent, especially when they are used with text, in lists, or to signify actions for your users.

When to use it
Colored containers can be used for a variety of use cases.

• In list-style actions in your product.

• Replace a full button with an icon.

• On websites and landing pages as a way to bring harmony & consistency to lists of icons.

Square, Rounded or Circular
Any sort of container can work well in this case: square, rounded or completely circular. Follow your brand guidelines and design system to make sure you aren’t introducing inconsistent design patterns.

What color to use
Try colors that don’t overpower your overall layout. A safe and visually pleasing approach is to use a lighter shade of the same color that you are using for the icon itself.

Using color to add context
This is also an excellent way to use color for context: showing different categories, groups, or different actions that your user can take.

When not to use it
Generally speaking, don’t use colored containers in layouts that are already busy or content-dense. For example:

• Don’t use it in icon buttons that already use a colored background, as it might make things very noisy.

• Don’t use it when many icons are used together, e.g. an editor interface.