Bain Logo

Icons

Jump to Props

Visually describe actions that the user can perform

The ADAPT Design System uses all Eva Icons as a base, plus any new icons added by ADAPT designers. They come in both outline and filled styles:

Import

Icon Directory 📖

Use

Use icons to indicate a function, or to clarify a function where words can be misleading. Don't try to create illustrations out of icons – use an illustrator for that :)

Basic Usage

Styling / sizing an icon

All Icon components inherit the styles of their parent. To style an icon, you style the element which wraps it.

To change the size of an icon, use the fontSize property of its parent – not width, height or size. This is intentional so that icons mimic the style of their sibling text.

The examples below show how this is useful:

Hooray, it's done.

This is important!

Animating an icon

Same thing here, add the animation to the parent.

Props

Icon components do not take props. They are styled via their parent component.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy