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.

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

Import assets by name from their collection entry point:

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

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:

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.

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

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

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.

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

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.

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.

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

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

Every asset exports a matching metadata object:

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.