# Usage

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

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

The category pages for Icons, Logos, and Vectors share the same browser. Select an asset to view its preview, export name, style, import statement, and basic React usage.

## 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>
  );
}
```

## 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.