#Icons

Leaf UI's internal icons and the examples on this page use Lucide, but lucide-react is one of many options. Button's startIcon / endIcon and Input's prefix / suffix accept ReactNode, so you can use React components from other icon libraries.

#Browse icons online

Open the Lucide icon directory to search by name or keyword and preview icons. Source code is available in the Lucide GitHub repository.

You can also choose a library that matches your project's style and existing dependencies:

#Install and import

The example below uses lucide-react. Add it as an application dependency when importing icons directly. For another library, install its package and replace the icon imports.

pnpm add lucide-react

Import only the icons you need. Icons follow the component's icon container size and inherit its current text color.

import { Button, Space } from '@ifhover/leaf-ui';

import { ArrowRight, Plus, Trash2 } from 'lucide-react';

export function ButtonIcons() {
  return (
    <Space wrap>
      <Button startIcon={<Plus />}>New project</Button>
      <Button variant="outline" endIcon={<ArrowRight />}>
        Continue
      </Button>
      <Button variant="outline" aria-label="Add project" startIcon={<Plus />} />
      <Button danger variant="outline" aria-label="Delete project" startIcon={<Trash2 />} />
    </Space>
  );
}

#Accessible names

Text supplies the name of a text button; its leading and trailing icons are decorative. Supply aria-label for icon-only buttons, such as “Add project” or “Delete project”. Icons should not be the only indication of an action.

Button's danger state applies the danger color to both its icon and text, so you do not need to hardcode a color on the icon.