Vectors

The vector collection contains 914 decorative React components for compositions that need more than an interface icon. It includes abstract shapes, people, patterns, scribbles, organic forms, and geometric artwork. Use the categories in the sidebar to browse the collection by visual purpose.

Install Honest UI with your preferred package manager:

npm install honestui

Import vectors from the dedicated honestui/vectors entry point:

import { Abstract1Shapes, Scribble1Sketch } from "honestui/vectors";

export function DecorativeHeader() {
  return (
    <div className="relative overflow-hidden">
      <Abstract1Shapes className="size-24 text-blue-500" aria-hidden="true" />
      <Scribble1Sketch className="h-8 w-32" aria-hidden="true" />
    </div>
  );
}

Named imports are tree-shakeable, so your application only bundles the vectors it uses.

Export names describe both the artwork and its style. Common suffixes include Shapes, Sketch, Pattern, Texture, and Character. Filtering by style on a category page makes it easier to keep a composition visually consistent.

Every vector also includes typed metadata:

import { Abstract1Shapes, Abstract1ShapesMetadata } from "honestui/vectors";

console.log(Abstract1ShapesMetadata.category); // "abstract"
console.log(Abstract1ShapesMetadata.variant); // "shapes"

Use allVectors when building an internal asset browser or visual editor. Prefer named imports in product code so you do not include the complete catalog.

• Abstract contains expressive non-representational shapes in shape and sketch styles.
• Arrows includes oversized and hand-drawn directional artwork for callouts and annotations.
• Busts contains illustrated people shown from the shoulders or chest upward.
• Ellipse includes oval and elliptical geometric compositions.
• Flowers contains floral shapes for decorative and organic layouts.
• Geometric combines circles, lines, polygons, and other constructed forms.
• Misc contains decorative artwork that does not belong to a single visual family.
• Moon includes crescent and lunar-inspired forms.
• Numbers contains illustrated numerals for editorial and promotional compositions.
• Organic includes fluid blobs, natural contours, patterns, and textures.
• Polygons contains multi-sided geometric shapes.
• Rectangles includes rectangular frames and compositions.
• Scribbles contains hand-drawn lines, loops, underlines, and annotation marks.
• Sitting People contains full-body character illustrations in seated poses.
• Standing People contains full-body character illustrations in standing poses.
• Stars includes starbursts and decorative star shapes.
• Triangles contains triangular geometric compositions.
• Wheels includes radial and wheel-like shapes.

Vector components accept standard SVG props plus size and className. Use CSS width and height utilities when the artwork is not square. Vectors are intended as compositional elements, so they work well with absolute positioning, transforms, clipping, and responsive sizing.

Decorative vectors should normally use aria-hidden="true" and should not receive focus. When an illustration communicates information that is not present in nearby text, give it a concise accessible name with aria-label or provide an equivalent text description.