More Paste Icons

[ldvlgr]

It would be nice if we had access to a larger set of Paste Icons. Especially in Flex and for custom features, we are limited with what's in the current set of Paste Icons.

Here are a few suggestions for additional icons:

• Tool (Wrench)
• Whatsapp logo
• Coffee (Break)
• AI

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sure, I understand your need for more icons. If you have designed these icons and want to add them to the Paste repository, there are two ways to do it:

1. You can wait for the design systems team to add in the icon. This usually takes between 2 to 6 weeks for us to plan and execute on the work. If you formatted the icon in Figma using the instructions above, attach the SVG export to your original GitHub discussion. We'll reply to the discussion when your icon component is ready.
2. Alternatively, you or your team can open a Pull Request (PR) on our repository with the required changes. If you or a member of your team can't format the icon in Figma, the design systems team will still need to plan and execute on the design part of the work. Overall, this self-service approach greatly speeds up the process of getting your icon into the Paste package because it bypasses our team's sprint practices.

Remember, Paste icons are distributed as both SVG files and React components. Here's an example of how to use an icon:

import {PlusIcon} from '@twilio-paste/icons/esm/PlusIcon';

const Component = () => (
  <Button variant="secondary" size="small" onClick={() => {}}>
    <PlusIcon decorative={true} />
    Add to cart
  </Button>
);

For more information about our icon system, checkout our usage guide here.

---

Here are some similar discussions:

• Series of UI Icons Needed :) (updated: 2022-08-04T07:57:37Z, similarity score: 0.86)
• Business icon use example - Answer (updated: 2023-07-31T13:06:26Z, similarity score: 0.86)
• Streamline Icons (updated: 2023-02-01T11:56:03Z, similarity score: 0.86)

[serifluous]

Hey @ldvlgr ! Can you share some screenshots or prototype examples of where you would use these 2 icons?:

• Tool (Wrench)—We have BuildIcon, which you could try out if you haven't seen it yet.
• Coffee (Break)

For the Whatsapp logo, we don't add 3rd party logos to Paste right now. Most brands have strict usage guidelines around color and clearspace for their logos that we want to make sure teams thoughtfully apply and manage those assets for their own use cases.

For the AI icon, we're currently working with a few product teams to define a Paste AI UI kit, which will include icons. @waijeeho is currently involved in some of this work.

[ldvlgr]

For a wrench, anything like this "Build" icon
https://mui.com/material-ui/material-icons/?query=wrench
In Flex we could use a Wrench tool icon to open a (side) panel to update agent/worker settings, for example

Many Flex customers add a "Break" activity (agent status) and it would be nice to have a coffee icon to indicate that they are on break
Here are some examples: https://mui.com/material-ui/material-icons/?query=coffee

Similarly, another common agent activity is "Lunch/Meal". Maybe a fork & knife would be a good icon for this:
https://mui.com/material-ui/material-icons/?query=meal

[serifluous]

(For the team's context: I received a follow-up screen recording in Slack & also realized this was for Flex plugins. I also shared the Flex design manager names)

• Instead of a Wrench, could the ProductSettings icon (glyph of a gear) work for you since you're using it for a settings panel?
• For the Break and Lunch/Meal icons, I'd recommend reaching out to a member of the Flex design team on #help-flex-ux to help out with exporting SVGs to use with the SVG-to-React plugin to convert the icons to components and maintain them separately https://paste.twilio.design/core/libraries#svg-to-react