Developer mode
Opens components on the React tab by default.
Your bookmarks

FeatureIcon

Also known as Fare types icon, pricing table icon

Draws attention to specific features.

Feature icons add simple visual context to a pricing table so users can understand the context at a glance.

Component status

Figma
Designing
ETD W40
Web (React)
Developing
ETD W41
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Content structure

Icon: shows the icon and it's best to pass through the feature name.

Guidelines

Include non-visual information

Icons can create important context for users, but not everyone will see them. So make sure everything necessary is presented in a non-visual form.

By default, the icon comes with alternative text that’s the same as the name of the feature. Check to make sure that this information is meaningful and not unnecessarily repeated.

Related components

PricingTable

Feature icons work well to draw attention to features inside more complex presentations, such as a pricing table.

Illustration

Feature icons help provide visual context. For more guidance on visual components, check out illustrations.