Documentation
Components
Icon

Icon

Display icons using well-defined styles.

Usage

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

import { Icon } from "kitchn"

The Icon component has multiple ways to display icons. You can use a SVG Element icon or a link pointing to a SVG file or any image.

For the following examples, we will use the AiFillHome icon from the React Icons library for uses with SVG Element. You can use any icon or library as long as it is a svg element.

Then we will use an image icon from the link /favicon.svg (https://kitchn.tonightpass.com/favicon.svg (opens in a new tab)).

đź’ˇ

Referenced working icons libraries here

Basic

Code Editor
<Container row>
  <Icon icon={RiHomeFill} />
  <Icon src={iconUrl} />
</Container>

Color

⚠️

The Icon component is designed to work with SVG elements and some props like color might not work if a src prop is used. If you want to display an image, you can use the Image component. This feature is here for users that maybe have some custom SVG icons or images as icons.

Color light from TextColors:

Code Editor
<Container>
  <Icon icon={RiHomeFill} color={"light"} />
</Container>

Accent color

Color primary from AccentColors:

Code Editor
<Container>
  <Icon icon={RiHomeFill} accent={"primary"} />
</Container>

Custom color

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

Code Editor
<Container>
  <Icon icon={RiHomeFill} color={"#e74c3c"} />
</Container>

Size

Sizes are defined in the Size enum.

Code Editor
<Container row>
  <Container>
    <Icon icon={RiHomeFill} size={"tiny"} />
    <Icon icon={RiHomeFill} size={"small"} />
    <Icon icon={RiHomeFill} size={"normal"} />
    <Icon icon={RiHomeFill} size={"medium"} />
    <Icon icon={RiHomeFill} size={"large"} />
    <Icon icon={RiHomeFill} size={"extraTitle"} />
    <Icon icon={RiHomeFill} size={52} />
    <Icon icon={RiHomeFill} size={"64"} />
  </Container>

  <Container>
    <Icon src={iconUrl} size={"tiny"} />
    <Icon src={iconUrl} size={"small"} />
    <Icon src={iconUrl} size={"normal"} />
    <Icon src={iconUrl} size={"medium"} />
    <Icon src={iconUrl} size={"large"} />
    <Icon src={iconUrl} size={"extraTitle"} />
    <Icon src={iconUrl} size={52} />
    <Icon src={iconUrl} size={"64"} />
  </Container>
</Container>

Custom size

Number and string values in pixels are accepted as well.

Code Editor
<Container row>
  <Container>
    <Icon icon={RiHomeFill} size={30} />
    <Icon icon={RiHomeFill} size={"42"} />
    <Icon icon={RiHomeFill} size={"60px"} />
  </Container>

  <Container>
    <Icon src={iconUrl} size={30} />
    <Icon src={iconUrl} size={"42"} />
    <Icon src={iconUrl} size={"60px"} />
  </Container>
</Container>

Align

Code Editor
<Container>
  <IconContainer row gap={10}>
    <Icon icon={RiHomeFill} align={"top"} />
    <Icon icon={RiHomeFill} align={"middle"} />
    <Icon icon={RiHomeFill} align={"bottom"} />
  </IconContainer>

  <IconContainer row gap={10}>
    <Icon src={iconUrl} align={"top"} />
    <Icon src={iconUrl} align={"middle"} />
    <Icon src={iconUrl} align={"bottom"} />
  </IconContainer>
</Container>

Props

NameTypeDefaultRequiredDescriptionAccepted values
iconSVGElementundefined~The icon as a svg element.-
srcstringundefined~The icon as a link pointing to a svg file or any image.-
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'

Icons libraries

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

Last updated on
HighlightImage