Icons in menus or not: what are Paste's guidelines?

[bchicca]

Background

When adding an overflow menu to the UI, what is the guidance in regard to the use of icons alongside menu items?
I'm aware that Paste allows to use icons in menus but I wonder when it is recommended to use them and when it is recommended to not use them.
Do icons in menus improve recognition and, therefore, reduce the time to complete the task or do they function as decoration only? Any insights into any research that might have been done in the past would be very useful.
What is Paste's guidance in regard to the scalability of an iconography system?

Feedback

Guidance

Stage of design

Discovery

Research

No response

Relevant links

No response

Are you looking for visual design support?

• Yes

Additional Information

No response

[dosubot[bot]]

🤖

In the Paste design system, icons can be used in menus in various ways. They can be used as decorative elements, as seen in the MenuButton component where the ChevronDownIcon is used with the decorative prop set to true. This indicates that the icon is purely decorative and does not contribute to the meaning of the interface.

Icons can also be used to represent actions or content in menu items. For example, in the groupingExample, the MenuGroup component uses the AttachIcon as a decorative icon to represent the group. In the itemContentExample, icons are used in MenuItem components to represent different types of content, with the decorative prop set to false and a title provided for accessibility.

In the CheckboxMenuExample and RadioMenuExample, icons are used alongside text in MenuItemCheckbox and MenuItemRadio components to represent different options.

However, the provided context does not include any research or guidelines indicating whether the use of icons in menus improves task completion time or if they function as decoration only. You can find these examples in the MenuExamples.ts file.

As for the specific guidelines in the Paste design system for using icons in menus, they allow for the use of icons in the MenuButton component to indicate the presence of a dropdown menu, as the trigger for the menu itself, within the MenuItem component to provide additional information or context for the menu item, and in the MenuGroup component to provide a visual indicator for the group. In all cases, the decorative prop is used to indicate whether the icon is purely decorative or if it provides additional information. If decorative is set to false, a title must be provided for accessibility purposes. You can find these examples in the index.stories.tsx file.

The Paste design system does provide some guidance on the size of icons used in menus. This is evident from the size property in the PasteIconPrideProps interface. This property is optional and its value is a number, which likely corresponds to the size of the icon in some unit of measurement (e.g., pixels). However, there is no explicit guidance or recommendations on the color of icons used in menus in the provided context. The color of the icon seems to be determined by the SVG paths within the svg element, and these colors are hardcoded. You can find this in the PasteIconPride.tsx file.

I hope this information helps! If you have any other questions or need further clarification, feel free to ask.

Sources

• packages/paste-website/src/component-examples/MenuExamples.ts
• packages/paste-core/components/menu/stories/index.stories.tsx
• packages/paste-website/src/components/icons/PasteIconPride.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[serifluous]

Hey @bchicca ! You can treat the guidelines here as our blanket guideline for all icon usage: https://paste.twilio.design/components/icon/usage-guidelines

Use an icon only when it provides additional clarity or is necessary to draw attention to a UI element.

Whether they improve recognition or are completely decorative is ultimately up to the judgment of you and your team based on the use case. We recommend starting out without using any icons, and then adding in the icons if you discover that the text labels alone aren't enough for immediate recognition, branding, comprehension, etc.

Looking forward to chatting more during office hours!