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.

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';
2
3const Component = (props) => {
4  return (
5    <Icon icon="Accept"/>
6  );
7}

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:

1export const PayIcon = (props) => {
2  return (
3    ![svg-0](./svg-0.svg)
4  );
5}
6
7export const PayIconActive = (props) => {
8  return (
9    ![svg-1](./svg-1.svg)
10  );
11}

Then import and use the icon module:

1import { 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

(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
	Facebook
	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
	Whatsapp
	WhatsappBold