# Usage

> Choose, style, and compose Honest UI icons, logos, and vectors in React.

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

[Icons](/docs/icons), [Logos](/docs/icons/logos), and [Vectors](/docs/icons/vectors) share the same browser. Search a collection by name, then select an asset to see its preview, its other styles, and its export name, import statement, and JSX ready to copy.

## Choose the right collection [#choose-the-right-collection]

* Use an **icon** to represent an action, destination, status, object, or product concept.
* Use a **logo** to identify a company, product, platform, country, or payment method.
* Use a **vector** to add decorative artwork, illustration, texture, or visual emphasis.

Do not use a logo as a generic interface icon, and do not use a decorative vector where a familiar icon would communicate an action more clearly.

## Basic usage [#basic-usage]

Import assets by name from their collection entry point:

```tsx
import { Search } from "honestui/icons";
import { VercelWordmark } from "honestui/logos";
import { Scribble1Sketch } from "honestui/vectors";

export function Example() {
  return (
    <section>
      <Search size={20} aria-label="Search" />
      <VercelWordmark className="h-6 w-auto" aria-label="Vercel" />
      <Scribble1Sketch className="h-8 w-32" aria-hidden="true" />
    </section>
  );
}
```

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

All three collections share one React SVG API. Assets accept standard SVG props such as `className`, `aria-label`, `role`, `width`, and `height`. They also accept a `size` prop and forward their ref to the underlying SVG element.

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.

## Using icons [#using-icons]

Choose the symbol that most directly matches the user's task. Keep one visual style within the same control or surface. Filled icons work well for selected states, while outline icons are usually calmer for default actions.

Variant names are part of the component export:

```tsx
import { Heart, HeartFilled } from "honestui/icons";

export function FavoriteState({ selected }: { selected: boolean }) {
  const FavoriteIcon = selected ? HeartFilled : Heart;
  return <FavoriteIcon aria-hidden="true" />;
}
```

Icons inherit `currentColor`. Set `size` for explicit dimensions and `strokeWidth` on outline icons.

```tsx
<Search className="text-muted-foreground" size={16} strokeWidth={1.5} />
<Search className="text-foreground" size={20} strokeWidth={1.75} />
```

## Using logos [#using-logos]

Logo exports can include a default mark, symbol, wordmark, or light and dark version. Choose the version intended for the available space and background.

```tsx
import { Vercel, VercelWordmark } from "honestui/logos";

<Vercel size={24} aria-label="Vercel" />
<VercelWordmark className="h-6 w-auto" aria-label="Vercel" />
```

Wordmarks are not always square, so setting a height with `w-auto` usually preserves their intended proportions. Multicolor artwork preserves its authored colors. Follow the brand owner's identity and trademark guidelines when using a logo.

## Using vectors [#using-vectors]

Vectors are compositional elements rather than compact controls. Size and position them with CSS, and use clipping or transforms when building a decorative layout.

```tsx
import { Abstract1Shapes, Organic1Pattern } from "honestui/vectors";

export function HeroArtwork() {
  return (
    <div className="relative overflow-hidden">
      <Abstract1Shapes className="absolute -top-8 -right-8 size-48" aria-hidden="true" />
      <Organic1Pattern className="h-24 w-full" aria-hidden="true" />
    </div>
  );
}
```

Common vector styles include `Shapes`, `Sketch`, `Pattern`, `Texture`, and `Character`. Keeping a consistent style helps separate intentional art direction from visual noise.

## Inside controls [#inside-controls]

When an icon appears beside visible text, hide the SVG because the text already names the action. For icon-only controls, put the accessible name on the control.

```tsx
<button type="button" aria-label="Close dialog">
  <X aria-hidden="true" />
</button>
```

Logos and decorative vectors should not normally be used as button labels.

## Metadata and complete catalogs [#metadata-and-complete-catalogs]

Every asset exports a matching metadata object:

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

The entry points also export `allIcons`, `allLogos`, and `allVectors`, grouped by category. These complete catalogs are useful for internal browsers and editors. Prefer named imports in product code so your application does not bundle every asset.