3 ms·
Show HN: SquareFaceIcon – a tiny "protocol" for consistent square avatars
SquareFaceIcon is a super–simple “avatar protocol” plus a free web tool for generating consistent square face icons:
https://squarefaceicon.top/ https://squarefaceicon.top/
Instead of every product/team reinventing avatar styles, SquareFaceIcon treats a face icon as a tiny, structured “packet”:
- fixed square canvas
- a small set of discrete layers (skin, hair, eyes, mouth, extras, background)
- finite, enumerable options per layer (IDs instead of pixels)
That gives you:
- *Deterministic avatars from a tiny config* – you can describe an avatar with a short JSON (or even a few bytes), then render it anywhere the “protocol” is implemented. No binary image assets needed.
- *Consistent visual language* – all combinations obey the same square-face “grammar”, so a community, product, or game can have hundreds of unique avatars that still look like one family.
- *Cheap to store and send* – configs can live in your DB/user table, be generated from a hash, or passed in URLs, then rendered on the client.
The hosted generator at squarefaceicon.top is one reference implementation:
- 200+ pre-defined parts across multiple categories.
- Pure HTML5/JS, runs fully in the browser, no sign-in and no server-side image processing.
- Exports transparent PNGs in multiple sizes (64–512px) for Discord, forums, games, etc.
Why this might be useful:
- Small apps or side projects get a drop-in avatar system without dealing with uploads, moderation, or external CDNs.
- Communities can standardize on a simple avatar spec and still let users fully customize their look.
- Devs can re-implement the renderer in any stack (Canvas/WebGL/SVG/native) as long as they respect the same part IDs and layout rules.
If folks are interested, happy to:
- document the “protocol” more formally (schema for the avatar config)
- publish a minimal open-source renderer
- add an API for server-side generation
Feedback welcome on:
- what you’d want from such a tiny avatar “protocol” (versioning? theming? accessories?)
- whether you’d use this in a product, and what integrations you’d need (React/Vue components, game engines, etc.)