On this page
Flex UI Icons
(information)
This page applies to Flex UI 1.x.x.
For the Flex UI 2.x.x version of this content, see the Twilio Paste icons list.
The following icons are available to use in Flex UI. You can leverage these icons when adding new buttons into the Flex header or sidebar:
1import { Icon } from '@twilio/flex-ui';23const Component = (props) => {4return (5<Icon icon="Accept"/>6);7}
You can also create your own custom icons using SVG files. First, create a custom module using the SVG(s) you would like to use:
1export const PayIcon = (props) => {2return (34);5}67export const PayIconActive = (props) => {8return (910);11}
Then import and use the icon module:
1import { PayIcon, PayIconActive } from "./PayIcons";23// Use it in a component4<PaymentTab5key="payment-tab"6icon={<PayIcon />}7iconActive={<PayIconActive />}8/>9
(information)
Info
The icon names are case-sensitive.
| Icon | Name |
|---|---|
 | Accept |
 | AcceptLarge |
 | Add |
 | Agent |
 | AgentBold |
 | Agents |
 | AgentsBold |
 | Alert |
 | ArrowDown |
 | ArrowLeft |
 | ArrowRight |
 | ArrowUp |
 | Bulb |
 | BulbBold |
 | Call |
 | CallBold |
 | Close |
 | CloseLarge |
 | Cogs |
 | Dashboard |
 | DashboardBold |
 | Data |
 | DataBold |
 | DefaultAvatar |
 | DefaultAvatarBold |
 | Directory |
 | DirectoryBold |
 | Eye |
 | EyeBold |
 | |
 | FacebookBold |
 | Filter |
 | FilterUp |
 | GenericTask |
 | GenericTaskBold |
 | Hamburger |
 | Hangup |
 | HangupBold |
 | HangupLarge |
 | Help |
 | HelpBold |
 | Hold |
 | HoldBold |
 | HoldLarge |
 | HoldLargeBold |
 | IncomingCall |
 | IncomingCallBold |
 | Info |
 | InfoBold |
 | Line |
 | LineBold |
 | Loading |
 | Logout |
 | LogoutBold |
 | Message |
 | MessageBold |
 | Monitor |
 | MonitorOff |
 | More |
 | Mute |
 | MuteBold |
 | MuteLarge |
 | MuteLargeBold |
 | Read |
 | Resize |
 | SendLarge |
 | Settings |
 | SettingsBold |
 | SideMenuOff |
 | SideMenuOn |
 | Sms |
 | SmsBold |
 | Suggested |
 | Supervisor |
 | SupervisorBold |
 | TasksLarge |
 | TasksSmall |
 | Thumbdown |
 | ThumbdownBold |
 | Thumbup |
 | ThumbupBold |
 | Twilio |
 | Video |
 | VideoBold |
 | Voice |
| VoiceBold |
 | Volume |
 | VolumeBold |
 | |
 | WhatsappBold |