Tech Stencils & Cloud IconsCopy Anchor Link

@filekit-studio/sketch includes a built-in catalog of 675+ vector technology stencils spanning modern cloud providers, databases, runtimes, AI frameworks, and developer tools.

Every stencil is crafted as an optimized, responsive vector graphic with automatic contrast tuning for both light and dark themes.

[!TIP] Interactive Stencils Explorer: Want to browse, search, and copy SVG code for all 675+ icons? Visit the interactive Stencils Explorer.

1. Supported CategoriesCopy Anchor Link

The stencil catalog is organized into seven primary categories:

2. Using Stencils in the CanvasCopy Anchor Link

Users can open the stencil picker modal directly inside <SketchEditor /> by clicking the Stencils icon on the left toolbar or pressing Alt + I.

Once placed on the canvas, a stencil behaves like any native element:

• Scalable Vector: Drag corner handles to scale without pixelation.
• Magnetic Anchors: Connect arrows and orthogonal links directly to any edge of the stencil.
• Theme Adaptive: Automatically switches between dark and light variants (svgDark vs svg).

Inline @stencil Mention SummoningCopy Anchor Link

In addition to the stencil picker modal, <SketchEditor /> includes an inline @stencil mention and autocomplete engine allowing creators to drop stencils directly while typing, without ever leaving their keyboard:

1. Summon: Type @ followed by any keyword (e.g. @resend, @postgres, @redis, @docker, @tailwind, @aws) inside any text box, shape, or table cell.
2. Fuzzy Autocomplete: A floating popover appears directly beneath your typing cursor, querying all 675+ production stencils with real-time keyword matching and result counts.
3. Keyboard Navigation: Use ↑ and ↓ arrow keys to navigate matching candidates with live brand icon previews and category tags.
4. Instant Swap: Press Enter or Tab to immediately replace the typed query in-place with a production vector stencil node.
5. Dismiss: Press Esc to close the autocomplete popover and continue normal text editing.

3. Programmatic Usage & Custom StencilsCopy Anchor Link

You can import stencils directly from the dedicated code-split subpath @filekit-studio/sketch/stencils:

import { FULL_TECH_STENCILS, type TechIcon } from "@filekit-studio/sketch/stencils";

// Filter stencils by category
const cloudIcons = FULL_TECH_STENCILS.filter((icon) => icon.category === "cloud");
const databaseIcons = FULL_TECH_STENCILS.filter((icon) => icon.category === "database");

Stencil SchemaCopy Anchor Link

Each stencil conforms to the TechIcon interface:

export interface TechIcon {
  id: string;
  name: string;
  category: "frontend" | "backend" | "database" | "cloud" | "ai" | "tools";
  color: string;
  keywords: string[];
  svg: string;
  svgDark?: string;
  url?: string;
}

4. Registering Custom SVGsCopy Anchor Link

You can provide your own company or project stencils to <SketchEditor /> via the uiConfig.customStencils prop:

"use client";

import { SketchEditor } from "@filekit-studio/sketch";
import "@filekit-studio/sketch/styles.css";

const customStencils = [
  {
    id: "my-microservice",
    name: "Internal Auth Gateway",
    category: "tools" as const,
    color: "#6366f1",
    keywords: ["auth", "gateway", "internal"],
    svg: `<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="4" y="4" width="24" height="24" rx="4" />
            <path d="M12 16h8m-4-4v8" />
          </svg>`,
  },
];

export function CustomBoard() {
  return (
    <div className="w-screen h-screen">
      <SketchEditor
        uiConfig={{
          customStencils,
        }}
      />
    </div>
  );
}