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.

• Icons contains interface symbols for actions, navigation, status, content types, and product concepts. Import them from honestui/icons.
• Logos contains brand marks, wordmarks, flags, payment symbols, and technology identities. Import them from honestui/logos.
• 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.

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.

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

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.

Follow Installation to add the package, read Usage for collection-specific examples, and review Accessibility before shipping visual assets in an interface.