Display icons using well-defined styles.


First of all, you need to import the Icon component from the kitchn package.

import { Icon } from "kitchn"


NameTypeDefaultRequiredDescriptionAccepted values
iconSVGElementundefinedThe icon as a svg element.-
sizenumber | string | Sizeundefined-The size of the icon.Size
colorstring | TextColorsundefined-The text color of the icon. Strictly limited to colors of our design system. If you want to pass accent color make sure to pass accent instead of color.TextColors
accentstring | AccentColorsundefined-The accent color of the ico. Strictly limited to colors of our design system, but can be used in combination with color prop.AccentColors
alignstringundefined-The alignement of the icon.'top' | 'middle' | 'bottom'


For the following examples, we will use the AiFillHome icon from the React Icons library. But you can use any icon or library as long as it is a svg element.


Referenced working icons libraries here



Color light from TextColors:

Accent color

Color primary from AccentColors:

Custom color

Color as hex value (you can do anything color value type you want):


Sizes are defined in the Size enum.

Custom size

Number and string values in pixels are accepted as well.


Icons libraries

All icons libraries are compatible with the Icon component. Here are some of the most popular ones: