KarsaandEric Fennis
e4be16acd5
* fix(docs): replace missing LucideIcon icon names in guides * feat(docs): add How to use Lucide icons section to resources * feat(docs): update accessibility guide links * fix(docs): fix dead link in guide.md * fix(docs): fix color in example image * fix(docs): fix overlay color in example images * fix(how-to): added caution guidance type & rework some guidance rules relating to compact interfaces * fix(how-to): replaced caution items, what the heck, when did I reorder these 😅 * fix(how-to): fix colors --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
10 KiB
title, description
| title | description |
|---|---|
| How to pick the right icon | Learn when to use icons, when to avoid them, and how to choose icons that make interfaces easier to understand. |
How to pick the right icon
Icons can make an interface easier to scan. They work best when people already understand the symbol or when the icon appears with a clear text label.
Use text instead of an icon when the meaning is complex, abstract, or easy to misunderstand.
Match the interface style
Use icons with the same visual language in the same interface. Mixed styles can make related controls look unrelated.
:::: example ::: do Use one icon style for related controls. ::: ::: dont Don't mix unrelated icon styles in the same interface. ::: ::::
Use familiar icons for familiar actions
Icons work well for common actions and destinations that people already recognize from other interfaces.
:::: example ::: do Use icons for common actions with widely understood symbols. ::: ::: dont "strategy", "optimize", "synergy", "innovation" Don't use icons alone for abstract concepts with no common symbol. ::: ::::
Use icons as visual anchors
Icons can help people scan lists, menus, cards, and repeated controls. The icon needs to support the text, not compete with it.
:::: example ::: do ../images/how-to/visual_anchor_do.svg?raw=true Use icons to make associated options easier to scan. ::: ::: dont ../images/how-to/visual_anchor_dont.svg?raw=true Don't add icons to every line when they only create visual clutter. ::: ::::
Use icons in compact interfaces
Icons can help in tight spaces, such as mobile navigation, toolbars, tables, and compact controls. Keep labels when the icon is not obvious.
:::: example ::: do ../images/how-to/compact_interfaces_labels_do.svg?raw=true Keep labels in all layout variants when space allows. ::: ::: caution ../images/how-to/compact_interfaces_labels_dont.svg?raw=true Use icon-only controls only when a visible label does not fit.
In these cases, make sure that the label is accessible via hover, focus, or tap. ::: ::::
:::: example ::: do ../images/how-to/compact_interfaces_do.svg?raw=true Keep text labels next to icons in compact layouts, even when space is sparse. ::: ::: dont ../images/how-to/compact_interfaces_dont.svg?raw=true Don't remove labels in compact layouts when the meaning without them is unclear. ::: ::::
:::: example ::: caution ../images/how-to/compact_interfaces_caution_1.svg?raw=true Use icon-only controls only when the icon represents a widely understood action. ::: ::: caution ../images/how-to/compact_interfaces_caution_2.svg?raw=true Use icon-only controls only when the label is available on hover, focus, or tap. ::: ::::
Choose the clearest symbol
Use a familiar symbol when one exists. Novel symbols make people stop and interpret the interface.
:::: example
::: do trash
for deleting an image
Use a familiar symbol for a familiar action.
:::
::: dont image-off
for deleting an image
Don't make people learn a new symbol for a common action.
:::
::::
Match the context, not every detail
Choose the icon that makes the action clearest in context. A more specific icon is better only when the extra detail helps people understand the action.
:::: example ::: do ../images/how-to/appropriate_context_do.svg?raw=true Use clear action icons when the surrounding interface already provides the object context. ::: ::: dont ../images/how-to/appropriate_context_dont.svg?raw=true Don't add object details when the context already makes the object clear. ::: ::::
Keep icon meaning consistent
Use the same icon for the same meaning, and use different icons for different meanings.
:::: example ::: do ../images/how-to/consistent_icon_meaning_do.svg?raw=true Use different icons for distinct purposes or meanings. ::: ::: dont ../images/how-to/consistent_icon_meaning_dont.svg?raw=true Don't use the same icon for multiple distinct purposes or meanings. ::: ::::
:::: example ::: do ../images/how-to/consistent_icon_function_do.svg?raw=true Use the same icon for the same purpose or function. ::: ::: dont ../images/how-to/consistent_icon_function_dont.svg?raw=true Don't use different icons for the same purpose or function. ::: ::::
Do not iconize repeated status decoration
Avoid adding an icon to every repeated status marker when color, weight, text, or layout already communicates the state. Repeated status icons can turn useful list structure into visual noise.
:::: example ::: do ../images/how-to/repeated_status_do.svg?raw=true Use the lightest cue that makes the status clear. ::: ::: dont ../images/how-to/repeated_status_dont.svg?raw=true Don't add repeated status icons when they only restate what the list already shows. ::: ::::
Do not replace built-in control cues
Do not add icons to controls that already show people how they work. Native controls are easier to recognize when they behave and look familiar.
:::: example ::: do ../images/how-to/native_ui_elements_do.svg?raw=true Use the built-in visual cue when the control already communicates its behavior. ::: ::: dont ../images/how-to/native_ui_elements_dont.svg?raw=true Don't replace native controls with similarly themed interactive icons. ::: ::::
<style> .g-4 { display: flex; flex-direction: row; gap: 1rem; } </style>