On this page
Flex UI Icons
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 |