Skip to main content
The icon toolbar appears when you click on an icon element within a section. It provides controls for browsing the icon library, adjusting size and weight, changing position, uploading custom SVGs, and deleting icons.

​
Opening the Toolbar

Click on any icon element in the canvas. The toolbar appears above the icon with a smooth slide-in animation. It positions itself to stay within the viewport, adjusting if the icon is near the top or edges of the screen.
The toolbar closes when you click outside of it, press the Escape key, or interact with another element on the canvas.

​
Toolbar Controls

The icon toolbar includes the following controls from left to right:

​
Change Icon

Click the current icon button (first button, showing a preview of the active icon) to open the icon picker panel. This panel has two tabs:
The library tab provides access to the full Phosphor Icons collection with thousands of icons available. Features include:
  • Search bar — Type to filter icons by name (e.g., “arrow”, “heart”, “check”). The search is instant and filters as you type. Clear the search with the X button.
  • Weight selector — Six weight options displayed as buttons: Thin, Light, Regular, Bold, Fill, and Duotone. Click any weight to preview all icons in that style.
  • Icon grid — A scrollable grid showing icons in the selected weight. The currently active icon is highlighted with a ring. Click any icon to apply it immediately.
  • Icon count — The footer shows how many icons are available (or how many match your search).
The custom SVG tab lets you upload your own icon as an SVG file. This is useful for brand-specific icons or icons not available in the Phosphor library.
  • Drag and drop — Drag an SVG file onto the upload area.
  • Click to browse — Click the upload area to open a file picker.
  • File requirements — SVG format only, maximum 100KB file size.
  • Color preservation — Your custom SVG’s original colors are preserved (unlike Phosphor icons which use the current text color).
After uploading, the custom SVG preview appears with a Remove Custom Icon button to switch back to a Phosphor icon.
The Custom SVG tab only appears for icon elements that support custom SVGs. Some section icons only support Phosphor icons from the library.

​
Position Toggle

For icons inside button elements, Left and Right buttons appear, letting you place the icon on either side of the button text. The currently active position is highlighted.

​
Size Controls

Three controls adjust the icon size in pixels:
  • Minus (-) — Decrease size by 2px (minimum: 12px)
  • Size display — Shows the current size (e.g., “24px”) in a highlighted badge
  • Plus (+) — Increase size by 2px (maximum: 64px)

​
Delete Icon

For icons inside buttons, a trash icon button lets you remove the icon entirely from the button.

​
Close

The X button closes the toolbar.

​
Icon Weights Explained

Phosphor Icons support six visual weights, allowing you to match the icon style to your brand:
WeightDescription
ThinDelicate, minimal stroke width. Best for elegant, premium brands.
LightSlightly heavier than thin. Good for clean, modern designs.
RegularStandard weight. The most versatile choice for general use.
BoldHeavier strokes for emphasis. Works well at smaller sizes.
FillSolid filled icons. High visual impact, good for CTAs.
DuotoneTwo-tone icons with a primary and secondary fill. Adds depth.
Choose an icon weight that matches your brand style’s font weight. If your headings use bold weights, bold or fill icons tend to look cohesive. For lighter brands, thin or light icons work better.

​
Custom SVG Guidelines

When uploading custom SVGs, follow these guidelines for best results:
  • Use viewBox — Ensure your SVG has a viewBox attribute for proper scaling.
  • Keep it clean — Remove unnecessary XML declarations, comments, and metadata.
  • Optimize file size — The maximum is 100KB, but smaller files load faster.
  • Test at target size — Preview your custom icon at the size you plan to use to ensure it looks crisp.
Custom SVGs preserve their original colors and are not affected by the section’s text color. If you need an icon that inherits the text color, use a Phosphor icon instead.