# Icons

> Choose and use React icons, logos, and vectors from dedicated package entry points.

Source: https://www.honestui.com/docs/icons

Honest UI includes three visual asset collections with a shared React SVG API. Use icons for interface meaning, logos for identities, and vectors for decorative compositions. Import only the named assets your interface uses.

## Collections [#collections]

* [**Icons**](/docs/icons/categories/interface) contains interface symbols for actions, navigation, status, content types, and product concepts. Import them from `honestui/icons`.
* [**Logos**](/docs/icons/logos) contains brand marks, wordmarks, flags, payment symbols, and technology identities. Import them from `honestui/logos`.
* [**Vectors**](/docs/icons/vectors) contains abstract shapes, hand-drawn accents, people, patterns, and decorative illustrations. Import them from `honestui/vectors`.

Use Collections in the sidebar to switch catalogs. The category list updates to show the organization and item counts for the selected collection.

## Shared component API [#shared-component-api]

Assets accept standard SVG props such as `className`, `aria-label`, `role`, `width`, and `height`. They also accept a convenient `size` prop and forward their ref to the underlying SVG element.

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

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

## Variants and metadata [#variants-and-metadata]

An export name includes its visual variant when applicable. Icons can have filled, rounded, or doodle versions; logos can have symbols and wordmarks; vectors can have shape, sketch, pattern, texture, or character versions.

Every component has a matching metadata export describing its ID, name, category, variant, tags, and view box. Each package entry point also exposes its complete catalog as `allIcons`, `allLogos`, or `allVectors` for internal browsers and asset pickers.

## Get started [#get-started]

Follow [Installation](/docs/icons/installation) to add the package, read [Usage](/docs/icons/usage) for collection-specific examples, and review [Accessibility](/docs/icons/accessibility) before shipping visual assets in an interface.