Skip to contentSkip to navigationSkip to topbar
Rate this page:
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:


_10
import { Icon } from '@twilio/flex-ui';
_10
_10
const Component = (props) => {
_10
return (
_10
<Icon icon="Accept"/>
_10
);
_10
}


Create custom icons

create-custom-icons page anchor

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:


_11
export const PayIcon = (props) => {
_11
return (
_11
![svg-0](./svg-0.svg)
_11
);
_11
}
_11
_11
export const PayIconActive = (props) => {
_11
return (
_11
![svg-1](./svg-1.svg)
_11
);
_11
}

Then import and use the icon module:


_10
import { PayIcon, PayIconActive } from "./PayIcons";
_10
_10
// Use it in a component
_10
<PaymentTab
_10
key="payment-tab"
_10
icon={<PayIcon />}
_10
iconActive={<PayIconActive />}
_10
/>


(information)

Info

The icon names are case-sensitive.

IconName
IcnAccept.
Accept
IcnAcceptLarge.
AcceptLarge
IcnAdd.
Add
IcnAgent.
Agent
IcnAgentBold.
AgentBold
IcnAgents.
Agents
IcnAgentsBold.
AgentsBold
IcnAlert.
Alert
IcnArrowDown.
ArrowDown
IcnArrowLeft.
ArrowLeft
IcnArrowRight.
ArrowRight
IcnArrowUp.
ArrowUp
IcnBulb.
Bulb
IcnBulbBold.
BulbBold
IcnCall.
Call
IcnCallBold.
CallBold
IcnClose.
Close
IcnCloseLarge.
CloseLarge
IcnCogs.
Cogs
IcnDashboard.
Dashboard
IcnDashboardBold.
DashboardBold
IcnData.
Data
IcnDataBold.
DataBold
IcnDefaultAvatar.
DefaultAvatar
IcnDefaultAvatarBold.
DefaultAvatarBold
IcnDirectory.
Directory
IcnDirectoryBold.
DirectoryBold
IcnEye.
Eye
IcnEyeBold.
EyeBold
IcnFacebook.
Facebook
IcnFacebookBold.
FacebookBold
IcnFilter.
Filter
IcnFilterUp.
FilterUp
IcnGenericTask.
GenericTask
IcnGenericTaskBold.
GenericTaskBold
IcnHamburger.
Hamburger
IcnHangup.
Hangup
IcnHangupBold.
HangupBold
IcnHangupLarge.
HangupLarge
IcnHelp.
Help
IcnHelpBold.
HelpBold
IcnHold.
Hold
IcnHoldBold.
HoldBold
IcnHoldLarge.
HoldLarge
IcnHoldLargeBold.
HoldLargeBold
IcnIncomingCall.
IncomingCall
IcnIncomingCallBold.
IncomingCallBold
IcnInfo.
Info
IcnInfoBold.
InfoBold
IcnLine.
Line
IcnLineBold.
LineBold
IcnLoading.
Loading
IcnLogout.
Logout
IcnLogoutBold.
LogoutBold
IcnMessage.
Message
IcnMessageBold.
MessageBold
IcnMonitor.
Monitor
IcnMonitorOff.
MonitorOff
IcnMore.
More
IcnMute.
Mute
IcnMuteBold.
MuteBold
IcnMuteLarge.
MuteLarge
IcnMuteLargeBold.
MuteLargeBold
IcnRead.
Read
IcnResize.
Resize
IcnSendLarge.
SendLarge
IcnSettings.
Settings
IcnSettingsBold.
SettingsBold
IcnSideMenuOff.
SideMenuOff
IcnSideMenuOn.
SideMenuOn
IcnSms.
Sms
IcnSmsBold.
SmsBold
IcnSuggested.
Suggested
IcnSupervisor.
Supervisor
IcnSupervisorBold.
SupervisorBold
IcnTasksLarge.
TasksLarge
IcnTasksSmall.
TasksSmall
IcnThumbdown.
Thumbdown
IcnThumbdownBold.
ThumbdownBold
IcnThumbup.
Thumbup
IcnThumbupBold.
ThumbupBold
IcnTwilio.
Twilio
IcnVideo.
Video
IcnVideoBold.
VideoBold
IcnVoice.
Voice
IcnVoiceBold.
VoiceBold
IcnVolume.
Volume
IcnVolumeBold.
VolumeBold
IcnWhatsapp.
Whatsapp
IcnWhatsappBold.
WhatsappBold

Rate this page: