Iconography

Icons add emphasis, familiarity, and scanability to adjacent text.

Types

1. Base Set

Streamline is a large library, sometimes with dozens of icons that represent the same thing. Below is a base set for common actions that we strive to limit ourselves to across applications. https://streamlineicons.com

Usage

import * as Icons from '../../../icons'

Render an icon as a react component by appending it's name after the Icons import. Only supports the className attribute. Icons will inherit their color from their parent.

<div className="flex items-center justify-center">
  <Icons.Calculate className="size-8 p-4" />
  <Icons.Search />
  <button className="kp-button-outline text-blue-500">
    <Icons.Edit />
    <span>Edit</span>
  </button>
</div>