Skip to main content

Custom Icons: Add Your Logo and Your Own Icons to Dashboards

Custom Icons: Add Your Logo and Your Own Icons to Dashboards

Put your company's logo on a wall-screen dashboard, or give each KPI a symbol your team recognises. Each account has its own icon library. You add icons as SVG files, and they work exactly like Qvasa's built-in widget icons: any size, in any colour, in light and dark mode.

Each icon is drawn in one colour, which you choose per widget. A logo with several colours is shown in a single tone, the way the built-in icons are.

Before you start

  • Widget formatting must be on for your account. Custom icons are part of Color Themes. If you don't see Color Themes under Settings, see Color Themes, Color Templates and Widget Formatting.

  • Everyone on the account can see the library and use its icons. To add, edit or delete icons, you need Can manage color templates. Admins don't get it automatically: grant it under Settings → Manage Account Members.

  • Have your icons as SVG files. Most design tools export SVG (Figma, Illustrator, Canva). PNG and JPG images can't be used. An account can hold up to 200 icons.

Step 1: Open the Icons page

Go to Settings → Color Themes and click the Icons card. If you don't have access to Settings, the same page is under User Settings → Color Themes.

The page lists every icon in your library with a preview, how many widgets and color templates use it, and when it was last changed. Search by name at the top.

Step 2: Add an icon

  1. Click New icon.

  2. Give it a name your team will search for, for example "Acme logo" or "Escalations".

  3. Drag your .svg file onto the drop zone, or click Choose file. If you have the SVG code instead, click Paste SVG code instead.

  4. Qvasa checks the drawing and shows it at two sizes on three backgrounds, the way widgets will draw it. When it says Ready to save, click Create.

Read any orange notes under the preview before you save. They say what was changed to make the drawing one colour, for example a second colour, a gradient, a dashed outline or text that was removed. If the preview looks right, it's fine to save. If it doesn't, fix the file and drop it in again:

  • Convert text to outlines (in Illustrator: Type → Create Outlines; in Figma: select the text and Flatten it) before you export. Text in an SVG is removed.

  • Remove backgrounds: a shape that covers the whole icon fills it in as one solid block.

  • Keep it simple: solid shapes and lines work best. Gradients, clipping masks and dashed lines don't carry over.

Step 3: Put an icon on a widget

  1. Open the dashboard and click Edit.

  2. Click the paint roller on a quick stat or a display title (Format widget).

  3. In the Icon section, click the Icon field. Your icons are listed first, marked Your icon. Type to search the library.

  4. Choose a Color and Size, and the side it sits on (Side of the value on a quick stat, Side of the name on a title).

  5. Use the Distance from anchor point slider to place it: 0 puts the icon right beside the number or name, 100 pushes it to the edge of the tile. Then click Save.

You can also pick an icon in a color template. Every widget that follows the template then shows it.

What done looks like

Your icons draw in the colours you chose, in light and dark mode, in presentation mode, on embedded dashboards and in scheduled image exports.

Edit or delete an icon

  • Edit (the pencil on its row) renames the icon or replaces its drawing. Every widget and template that uses it shows the new drawing.

  • Delete (the bin) first tells you how many widgets and templates use the icon. Once deleted, it's taken off all of them, and they show no icon.

Faster: manage icons with Claude

The icon library is fully available through the Qvasa MCP and the User Access API, so you can load a whole set at once:

  • "Add these 20 SVG files to our icon library, named after their file names."

  • "Check this SVG before you add it and tell me what would be changed."

  • "Put our Acme logo on the title of every tab of the Wall Screen dashboard, in our brand teal."

  • "Which icons aren't used by any widget?"

Claude has exactly the permissions of the user who connected it. To connect it, see User Access Tokens and the Qvasa MCP: Connecting Claude to Your Account. To let Claude add, change or delete icons, give the token the Write everything scope and Manage color templates, themes and icons.

Troubleshooting

  • There's no New icon button. You need Can manage color templates. Ask an admin to grant it under Manage Account Members.

  • My logo looks small. Icons are drawn in a square, so a wide logo uses only part of its height. Raise the icon's Size, or use a square version of the logo (just the mark, without the wordmark).

  • My logo lost its colours. Every icon is one colour, set per widget. Pick your brand colour in the widget's Color field.

  • Part of the drawing is filled in or missing. Check the orange notes in the form: text, backgrounds, masks and linked shapes don't carry over. Export again with text as outlines and no background, then use Edit to replace the drawing.

  • The SVG is refused. The form says why and what to do next. Very detailed files can be too large once cleaned: simplify the paths in your design tool and export again.

Did this answer your question?