Skip to main content

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.

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.

​
Installation

Install the icons package along with its peer dependencies: 
yarn add @twilio-paste/icons @twilio-paste/core
Or using npm: 
npm install @twilio-paste/icons @twilio-paste/core

​
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.0

​
Next Steps