Skip to contentSkip to navigationSkip to topbar
Twilio Docs
Page tools
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(link takes you to an external page).

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:

1
import { Icon } from '@twilio/flex-ui';

2


3
const Component = (props) => {

4
  return (

5
    <Icon icon="Accept"/>

6
  );

7
}

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:

1
export const PayIcon = (props) => {

2
  return (

3
    ![svg-0](./svg-0.svg)

4
  );

5
}

6


7
export const PayIconActive = (props) => {

8
  return (

9
    ![svg-1](./svg-1.svg)

10
  );

11
}

Then import and use the icon module:

1
import { PayIcon, PayIconActive } from "./PayIcons";

2


3
// Use it in a component

4
<PaymentTab

5
  key="payment-tab"

6
  icon={<PayIcon />}

7
  iconActive={<PayIconActive />}

8
/>

9

Default Icons

default-icons page anchor
(information)

Info

The icon names are case-sensitive.

IconName
Phone icon with check mark indicating call acceptance.
Accept
Phone receiver icon with check mark.
AcceptLarge
Plus icon for adding items.
Add
Bold icon of a headset representing an agent.
Agent
IcnAgentBold.
AgentBold
Icon of three people representing agents.
Agents
Bold icon of three people representing agents.
AgentsBold
Alert icon with exclamation mark inside a triangle.
Alert
Downward arrow icon.
ArrowDown
Left arrow icon for navigation.
ArrowLeft
Right arrow icon for navigation.
ArrowRight
Upward pointing arrow icon.
ArrowUp
Light bulb icon representing ideas or innovation.
Bulb
Bold light bulb icon.
BulbBold
Phone call icon with handset and sound waves.
Call
Bold phone icon representing call functionality.
CallBold
Close icon with an 'X' shape.
Close
Large black close icon.
CloseLarge
Cogs icon representing settings or configuration.
Cogs
Dashboard icon with three vertical bars and a line graph.
Dashboard
Bold dashboard icon with circular gauge and arrow.
DashboardBold
Data icon with three vertical bars of increasing height.
Data
Bold data icon with three vertical bars.
DataBold
Default user avatar icon with a person silhouette.
DefaultAvatar
Bold default avatar icon with person silhouette.
DefaultAvatarBold
Directory icon with a folder and magnifying glass.
Directory
Bold directory icon with three stacked lines.
DirectoryBold
Eye icon for visibility settings.
Eye
Bold eye icon symbolizing visibility.
EyeBold
Bold Facebook logo icon.
Facebook
IcnFacebookBold.
FacebookBold
Filter icon with funnel shape.
Filter
Upward arrow icon indicating filter option.
FilterUp
Generic task icon with a clipboard and checkmark.
GenericTask
Bold icon representing a generic task.
GenericTaskBold
Hamburger menu icon with three horizontal lines.
Hamburger
Phone hangup icon with a crossed-out circle.
Hangup
Bold hangup icon with phone receiver.
HangupBold
IcnHangupLarge.
HangupLarge
Help icon with a question mark inside a circle.
Help
Bold help icon with a question mark.
HelpBold
Phone handset icon with pause symbol.
Hold
Bold hold icon with phone handset.
HoldBold
Hold button icon with phone and pause symbol.
HoldLarge
IcnHoldLargeBold.
HoldLargeBold
Icon of a phone with an arrow indicating an incoming call.
IncomingCall
Bold incoming call icon with phone and arrow.
IncomingCallBold
Information icon with lowercase 'i' inside a circle.
Info
Bold information icon with a lowercase 'i' inside a circle.
InfoBold
Simple line icon with vertical and horizontal segments.
Line
Bold line icon with a vertical and horizontal line intersecting.
LineBold
Circular loading spinner icon.
Loading
Logout icon with arrow pointing left.
Logout
Bold logout icon with arrow pointing left.
LogoutBold
Message icon with speech bubble and dots.
Message
Bold message icon with speech bubble.
MessageBold
Monitor icon with a small circle in the top right corner.
Monitor
Monitor icon with a diagonal line indicating off status.
MonitorOff
Three vertical dots icon for more options.
More
Mute icon with a crossed-out microphone.
Mute
Bold mute icon with crossed microphone.
MuteBold
Mute icon with crossed-out microphone.
MuteLarge
IcnMuteLargeBold.
MuteLargeBold
Envelope icon with a check mark indicating read status.
Read
Resize icon with arrows pointing outward from a square.
Resize
Paper airplane icon representing send action.
SendLarge
Settings icon with gear symbol.
Settings
Bold gear icon representing settings.
SettingsBold
Collapsed side menu icon with three horizontal lines.
SideMenuOff
Side menu icon with three horizontal lines.
SideMenuOn
SMS icon with speech bubble and envelope.
Sms
Bold SMS icon with speech bubble and text lines.
SmsBold
Icon of a light bulb with a check mark inside, indicating a suggestion.
Suggested
Icon of a person with a headset, representing a supervisor.
Supervisor
Bold icon of a person with a headset, representing a supervisor.
SupervisorBold
Icon of a clipboard with check marks representing tasks.
TasksLarge
Icon depicting two overlapping squares with a checkmark.
TasksSmall
Thumbs down icon.
Thumbdown
Bold thumbs up icon.
ThumbdownBold
Thumbs up icon with a black outline.
Thumbup
IcnThumbupBold.
ThumbupBold
Twilio logo with two connected circles.
Twilio
Video play icon with a triangle inside a circle.
Video
Bold video play icon.
VideoBold
Black telephone handset icon.
Voice
Bold voice icon with a phone handset symbol.
VoiceBold
Speaker icon with sound waves.
Volume
Bold volume icon with three sound waves.
VolumeBold
WhatsApp logo icon in black.
Whatsapp
Bold WhatsApp logo icon in black.
WhatsappBold