Untitled UI Icons React

@untitled-ui/icons-react packages the entire Untitled UI icon set — over 1,100 outline icons — as individually importable React components. Each icon ships as a small, typed SVGProps<SVGSVGElement> component generated directly from source SVGs, so bundlers can tree-shake unused icons and consumers get full TypeScript autocomplete for every icon name.

The package is built by an automated SVGR + SVGO pipeline: source SVGs live in a top-level icons/ directory, then get optimized and transformed into PascalCase-named React components with strokeWidth, currentColor, and a consistent 24x24 viewBox baked in, before being re-exported from a single index. That build script is the only real logic in the repo — the published package itself is pure, dependency-free icon components aside from a peer dependency on React.

What You Get

• 1,100+ pre-built React icon components covering UI, communication, files, weather, devices, security, and more
• Full TypeScript typings — every icon is typed as SVGProps<SVGSVGElement> with generated .d.ts declarations
• Both CJS and ESM builds so the package works with modern bundlers and older Node tooling alike
• Consistent 24x24 viewBox, currentColor stroke, and 2px stroke width across the entire set for visual consistency

Common Use Cases

• Dropping consistent icons into a design system built on Untitled UI’s visual language
• Building admin dashboards, SaaS UIs, or marketing sites that need a large, cohesive icon set
• Replacing several single-purpose icon packages with one library that covers most common UI icon needs
• Prototyping UI quickly without hand-picking and optimizing individual SVGs from icon marketplaces

Under The Hood

Architecture The repo is an npm-workspaces monorepo (workspaces: ["packages/*"]) with a single published workspace, packages/icons-react. All logic lives in the build tooling, not the shipped package: scripts/build-icons/index.mjs reads every SVG out of a top-level icons/ directory and dispatches to a pluggable builder map (currently only a react builder). scripts/build-icons/builders/react.mjs wipes the workspace’s src/ directory, runs each SVG through @svgr/core with SVGO optimization and Prettier formatting to emit one PascalCase-named .tsx component per icon, then writes a single index.tsx barrel re-exporting every component. The published package itself has no runtime logic at all — it is generated source code, so the real architectural surface is the generation pipeline rather than anything a consumer executes.

Tech Stack The root workspace uses Node.js with npm workspaces, TypeScript ~5.5, and the @svgr/core toolchain (@svgr/plugin-svgo, @svgr/plugin-jsx, @svgr/plugin-prettier) plus camelcase and yargs to drive the icon-generation CLI. The published icons-react package has zero runtime dependencies, only peer dependencies on react (^17 || ^18 || ^19) and an optional @types/react. Its own build step (build.mjs) shells out to the Babel CLI to transpile src/ into separate build/cjs and build/esm output directories, and runs tsc --declarationDir twice to emit matching type declarations for each — a conventional dual-package (CJS/ESM) publishing setup assembled from plain CLI tools rather than a bundler like tsup or Rollup.

Code Quality There are no test files or test framework anywhere in the repository, and no CI configuration (no .github/workflows or equivalent) — quality control here is limited to a Prettier config and the mechanical consistency that comes from every icon component being generated rather than hand-written. Naming is uniform (PascalCase component names derived from SVG filenames via camelcase), and generated components are fully typed, but there is no linter configuration, no automated verification that a rebuild produces byte-identical output, and no tests exercising the build script itself.

What Makes It Unique This package doesn’t introduce a novel technical approach — it follows the same generate-icons-from-SVG-via-SVGR pattern used by numerous other icon libraries (Lucide, Feather, etc.). Its value is the source material and consistency it provides: a large, stroke-based icon set matching the Untitled UI Figma design system, generated through one shared pipeline so every icon shares identical stroke width, viewBox, and color-handling conventions. Developer experience is deliberately minimal-boilerplate — a single named import per icon, no configuration or provider setup required.