Skip to content
IndexDesign corpus
Component LibrariesReact Component Libraries
Component LibrariesComponent LibraryPrimitiveMITFreeReact

Facehash

Deterministic CSS-drawn avatar faces from any string, zero runtime dependencies

Visit resourceDocsRepository
Aboutfacehash.dev

Facehash is a single React component that hashes a string into a minimalist face rendered entirely in CSS — no canvas, no SVG sprites, no network call, no runtime dependencies. Props cover size, custom colour arrays, gradient or solid variants, a four-step 3D intensity, an initial-letter fallback, blinking, and a custom mouth renderer; it also exports Avatar / AvatarImage / AvatarFallback wrappers so a real photo falls back to a generated face. It ships from the Cossistant monorepo as the MIT-licensed npm package `facehash`, with a Next.js route handler for image-URL usage. It suits placeholder identity in chat apps, comment threads, agent lists, and seeded demo data.

Install
npm i facehash
For an agent

Reach for this instead of Dicebear or boring-avatars when you must not make a network request and want zero added bundle weight — it is pure CSS, so it renders in RSC output and in email-preview-style static HTML without hydration. Peer deps pin React >=18 <20 and Next >=15, so it will refuse to install on a React 17 or Next 14 codebase. It is at v0.1.0 and the repo stars belong to the parent Cossistant support-widget monorepo (AGPL-3.0) even though the package itself is MIT — cite the package licence, not the repo licence.

Why it is here. Identicon libraries almost always pull a canvas or SVG generator; drawing the whole face in CSS makes the same feature free at runtime and trivially themeable.

Install command, framework, licence and component list.
Components it ships1 total
Avatar
Helps you build4
Public ProfileChat Web AppCommentsFeed
Notable for
  • Faces drawn purely in CSS, 0 dependencies
  • Deterministic — same string, same face
  • Avatar/AvatarImage/AvatarFallback photo fallback
  • Next.js route handler for image URLs
  • MIT package inside an AGPL monorepo
Provenance

Verified 2026-08-15. HTTP 200. https://www.facehash.dev/ (WebFetch), https://registry.npmjs.org/facehash (curl, metadata parsed: v0.1.0, MIT, 7 versions, packages/facehash), https://github.com/cossistantcom/cossistant (WebFetch), https://api.github.com/repos/cossistantcom/cossistant. Note: npmjs.com package page returned 403 to WebFetch; registry API used instead.

Related resourcesComponent Libraries