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:
import { Icon } from '@twilio/flex-ui';
const Component = (props) => {
return (
<Icon icon="Accept"/>
);
}Create custom icons
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:
export const PayIcon = (props) => {
return (
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
...
</svg>
);
}
export const PayIconActive = (props) => {
return (
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
...
</svg>
);
}Then import and use the icon module:
import { PayIcon, PayIconActive } from "./PayIcons";
// Use it in a component
<PaymentTab
key="payment-tab"
icon={<PayIcon />}
iconActive={<PayIconActive />}
/>
Default Icons
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 |
Need some help?
We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.
