Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now

Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

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"/>
  );
}

For an example of an implementing a custom icon, see below.

Icon Name
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

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 />}
/>
Rate this page:

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 browsing the Twilio tag on Stack Overflow.