Code

Usage

There are currently 3 supported icon packages. @twilio-labs/match-icons-twilio, @twilio-labs/match-icons-sendgrid, and the universal @twilio-labs/match-icons-product. Icons are imported individually from their respective packages. The @twilio-labs/match-icons-twilio package requires a valid Streamline license. Ensure that you have a STREAMLINE_SECRET environment variable set with the license key found on the Streamline developer page.

import { ChatIcon } from "@twilio-labs/match-icons-twilio";
const Component = () => <ChatIcon decorative />;

Props

PropTypeDefaultDescription
color?Color'gray80''white', 'baseRed', 'blue50', 'blue60', 'blue80', 'baseGreen', 'baseOrange', 'basePurple', 'gray80', 'gray90', 'gray100'
size?IconSize'base''small', 'medium', 'base', 'large', 'xLarge'
title?stringnullAccessibility text provided to screenreaders.
decorative?booleanfalseDetermines if icon is decorative or informative. Decorative icon titles are not read by screenreaders.

Also supports margin props.


Guidelines

About Icons

Informative icons may be used to clarify actions a user may take or draw attention to specific UI elements. Decorative icons do not add information to the page and are included for visual enhancements only.

Accessibility

Here are some quick accessibility tips to ensure a positive user experience for all users:

  • Always include a title for icons that are not purely decorative.
  • Titles should provide additional context to the icon rather than describe the image.
  • Pair icons with descriptive text whenever possible.
  • Icons should not be interactive. They may be used within an interactive components, such as the Button.

Examples

Icon Color

The default icon color may be altered using a color token.

Icon Size

The size may be adjusted with an icon size token.





Icon size accepts responsive values.

Decorative Icons

Titles are required for accessibility compliance unless the icon is specifically designated as decorative.

Talk to me!