Skip to documentation content
|

Installation

Add Honest UI icons, logos, and vectors to your React project.

Icons, logos, and vectors are distributed with honestui. They require no stylesheet or provider.

Steps
1

Install the package

Install honestui once from your project root. All three collections are included.

npm install honestui
2

Choose a collection

Use Icons for interface symbols, Logos for identities, or Vectors for decorative artwork. Select a collection and category from the sidebar to browse its assets.

3

Import from its entry point

Each collection has a dedicated entry point so named imports remain clear and tree-shakeable.

import { Search } from "honestui/icons";
import { Vercel } from "honestui/logos";
import { Abstract1Shapes } from "honestui/vectors";

export function AssetRow() {
  return (
    <div className="flex items-center gap-4">
      <Search size={20} aria-hidden="true" />
      <Vercel size={24} aria-label="Vercel" />
      <Abstract1Shapes className="size-12" aria-hidden="true" />
    </div>
  );
}

Entry points
  • honestui/icons exports interface icons, icon metadata, and allIcons.
  • honestui/logos exports logos and wordmarks, logo metadata, and allLogos.
  • honestui/vectors exports decorative vectors, vector metadata, and allVectors.

Import directly from an entry point rather than the package root. No CSS import, asset loader, SVG configuration, or runtime initialization is needed.

React requirements

The assets are React SVG components and use the React JSX runtime. Your application must provide the compatible react and react-dom peer dependencies listed by honestui.