Notion Avatar Editor

Custom avatars for your next Svelte project.

Star on GitHub Inspired by
Runed Shadcn Svelte
Hello, stranger! Let's fix that.

Put a face to your name.

Live Preview Example

Shows what's currently being edited, before saving.

2025-05-14T09:59:07.234Z
blue

How to access:

avatarStore.previewSvgDataUrl

avatarStore.previewBgClass

avatarStore.previewConfig.username

avatarStore.previewConfig.colorName

avatarStore.previewConfig.lastModified

Saved Avatar Example

Shows the last saved version.
(persisted in localStorage)

How to access:

avatarStore.svgDataUrl

avatarStore.bgClass

avatarStore.config?.username

avatarStore.config?.colorName

avatarStore.config?.lastModified

avatarStore.configJSON

Primary JSON string for the avatar's settings. This serialized data is the main shared datapoint that drives the editor, previews and history.

{
  "version": 1,
  "username": "",
  "items": {
    "face": 14,
    "nose": 5,
    "mouth": 7,
    "eyes": 5,
    "eyebrows": 1,
    "glasses": 0,
    "hair": 7,
    "accessories": 0,
    "details": 0,
    "beard": 0
  },
  "colorName": "blue",
  "lastModified": "2025-05-14T09:59:07.234Z"
}