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:
_10import { Icon } from '@twilio/flex-ui';_10_10const Component = (props) => {_10 return (_10 <Icon icon="Accept"/>_10 );_10}
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:
_11export const PayIcon = (props) => {_11 return (_11 ![svg-0](./svg-0.svg)_11 );_11}_11_11export const PayIconActive = (props) => {_11 return (_11 ![svg-1](./svg-1.svg)_11 );_11}
Then import and use the icon module:
_10import { PayIcon, PayIconActive } from "./PayIcons";_10_10// Use it in a component_10<PaymentTab_10 key="payment-tab"_10 icon={<PayIcon />}_10 iconActive={<PayIconActive />}_10/>
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 |