Hero Image

Components

Icon Button

Play around with props, edit and copy code.

Properties

IconButton

Prop nameTypeDefault ValueDescription
childrennode
classNamestring

Icon

Prop nameTypeDefault ValueDescription
sizeunion'300'Set size of the icon
classNamestringAdd custom classes
colorunionSet the icon color
icon *unionWhich icon to show

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Additional information regarding accessibility of this component below.

The differences between icon and icon button is that icon button has a click response that follows the icon size, example icon-100 = 16 x16 px icon = 40 x 40 px click response. This means that icon size x 2.5 = click response size.

Read more about WCAG 2.1 AA.