The Right Way to Use Plus Icons in UI Design
As a UI designer, it's important to use visual cues consistently and purposefully. One common icon that often gets misused is the humble plus sign. Let's break down when and how to properly use plus icons in your designs.
Why the plus matters
Fundamentally, plus icons represent creation or addition. They signal to users that clicking will allow them to add new data or content to what already exists. This is distinct from icons that represent commands to manipulate existing data.
Combine the plus with labels... sometimes
For maximum clarity, pair a plus icon with a text label, e.g. "+ New Task". The icon allows for quick visual parsing, while the label removes ambiguity.
However, you can often omit labels in areas where the surrounding context is sufficiently clear. For example, a plus icon sitting prominently in the header of a "My Tasks" view shouldn't need a label. The location itself explains the action.
Pair with other icons for even clearer meaning
To make actions as easy to understand as possible, try combining the plus with other icons that represent the type of content being created.
Going back to tasks, you could pair the plus with a checklist icon to represent "Add New Task" without needing any text at all. The meaning should be obvious to most users at a glance.
Don't use the plus for non-creation actions
Overloading the plus icon for multiple meanings is a recipe for confusion. If you use the plus in one place to mean "add" and in another to mean "expand", users will inevitably get mixed up.
For non-additive actions, use other conventional icons:
- Disclosure arrows for showing/hiding content
- Gear icons for settings
- Magnifying glasses for zooming in
...and so on. Stick to existing conventions unless you have a very good reason to deviate.
Key Takeaways
- Use the plus icon consistently to represent creation or addition
- Pair it with labels if the surrounding context isn't 100% clear
- Combine with other icons to make the creative action more specific
- Don't use the plus to represent non-additive actions
- When in doubt, rely on established icon conventions
By following these guidelines, you can deploy the plus icon with purpose to make your UI clearer and easier to use. A consistent visual language is key to great design!