Skip to main content
Icons give the items in your workspace a quick visual identity. In Synti, three kinds of entities can carry an icon: sources, skills, and statuses. Labels intentionally don’t use icons — they render as colored dots instead, so the two systems stay visually distinct. You can set an icon with a single emoji, drop an image file next to the entity, or point at a remote URL. SVGs get special treatment so they follow your theme and entity color automatically.

Choosing an icon source

The quickest option. Put any emoji directly in the entity’s config.json, including multi-codepoint sequences like 👨‍💻.

How Synti resolves an icon

For each entity, Synti checks in order:
  1. An explicit icon value in config.json — emoji, relative path, or URL.
  2. An auto-discovered icon.* file in the entity’s directory (svg preferred).
  3. For sources only, a favicon derived from the MCP server or REST API base URL.
The first match wins, so an explicit icon always overrides an auto-discovered file.

Format guidance

Theme-aware SVGs

SVGs are the only format that recolors itself. If your SVG uses currentColor, Synti tints it to match the entity’s color and the active light or dark theme. If a path has no fill attribute, Synti injects the theme’s foreground color. SVGs with hardcoded colors render exactly as authored — useful when you want a fixed brand mark.
For a status or source icon that should blend into both light and dark mode, draw it with stroke="currentColor" (or fill="currentColor"), a 24×24 viewport, a stroke width of 2, and rounded caps and joins.

Rendering sizes

Synti renders icons at five fixed sizes depending on context — 14 px, 16 px, 20 px, 24 px, and 28 px. Vector icons scale cleanly across all of them; if you use a raster format, author it at a comfortable multiple of the largest size (28 px) to avoid blur.

Where files live

Icons sit inside each entity’s directory under your workspace in ~/.synti:
The simplest way to set an icon is to ask the agent — for example, “give the GitHub source a black octocat icon.” It writes the file and config for you. See Customizing statuses for the same pattern applied to statuses.