Paste Icons is Twilio’s icon library, designed with accessibility and consistency in mind. The library provides 300+ SVG icons as React components, ready to use across your applications.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Twilio-labs/paste/llms.txt
Use this file to discover all available pages before exploring further.
Installation
Install the icons package along with its peer dependencies:Key Features
Accessibility First
All icons in the Paste library are built with accessibility considerations:- Decorative icons: Icons that are purely visual can be marked as decorative
- Meaningful icons: Icons that convey information require a title for screen readers
- Proper ARIA attributes are automatically applied
Consistent Design
Every icon follows Twilio’s design system:- Uniform sizing based on design tokens
- Consistent stroke widths and visual weight
- Designed to work harmoniously with Paste components
Customizable
Icons can be customized to match your design needs:- Size: Choose from predefined icon sizes (sizeIcon10 through sizeIcon110)
- Color: Use any Paste design token color or “currentColor”
- Element: Customize via the Customization Provider
Icon Categories
The icon library includes icons across multiple categories:- UI Controls: Chevrons, arrows, close, menu, search, filter, etc.
- Actions: Edit, delete, copy, share, download, upload, etc.
- Status: Success, error, warning, information, loading, etc.
- Communication: Call, SMS, chat, email, voicemail, etc.
- Product Icons: Icons for Twilio products (Flex, Studio, Verify, etc.)
- Data & Charts: Bar chart, line chart, pie chart, table, etc.
- Media: Play, pause, stop, record, volume controls, etc.
- Text Formatting: Bold, italic, underline, alignment, lists, etc.
- File Types: Document, image, audio, video, zip, etc.
Design Principles
Clarity
Icons should be immediately recognizable and convey their meaning at a glance.Simplicity
Icons use simple, geometric shapes that scale well at different sizes.Consistency
All icons share the same visual language, making the system feel cohesive.Browser Support
Paste Icons work in all modern browsers that support SVG. The package is optimized for:- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Version
Current version: 13.1.0Next Steps
- Learn how to use icons in your components
- Browse the complete icon list
- Explore customization options