How to add and use icons in Visily

How to add and use icons in Visily

Use icons to represent actions, features, navigation items, statuses, and other visual information in your design. You can select an icon from Visily’s built-in Icon Library or upload your own custom icon.

Before you start

  1. Make sure you have permission to edit the board and are in design editing mode.
  2. Custom icons must be uploaded as SVG files.

Add an icon from the Icon Library

  1. Open the Icon Library in either of the following ways:
    1. Select Icon from the board’s bottom toolbar.

    2. Open the Icons tab in the Wireframe Library or Diagram Library.


  2. Browse the available icons or use the search bar to find one. Visily includes icons from popular libraries such as Nucleo, Material, Phosphor, Remix, Boxicons, and Lucide.


  3. Select an icon, then click the canvas to add it.
  4. Move or resize the icon as needed.

Search for an icon

Use the filters in the Icon Library to narrow down the available icons:
  1. Library: Browse icons from Nucleo, Material, Phosphor, Remix, Boxicons, or Lucide.


  2. Category: Filter icons by their purpose or subject.


  3. Icon style: Each library provides its own style filters to help you find icons with a consistent appearance.

You can also enter a keyword in the search bar to find a specific icon.
Info
The search bar works across the Elements, Templates, and Icons tabs. Matching results in other tabs appear as highlighted badges, allowing you to switch directly to the relevant results.

Customize an icon

Select an icon to open its toolbar. The available actions include:
  1. Style: Choose a different visual style for the icon.
  2. Size: Select a preset size or customize its width and height.
  3. Change icon: Replace the selected icon with another built-in icon.
  4. Color and opacity: Change the icon color and adjust its layer opacity.
  5. Flip: Flip the icon horizontally or vertically.
  6. Save as template: Save the icon and its settings as a reusable template.
  7. Export: Export the selected icon as an image or PDF, or send it to Figma.
  8. More actions: Access additional options such as align, arrange layers, copy, duplicate, and delete.

Upload and use a custom icon

Visily does not currently support uploading custom icons directly to the Icon Library. To use your own icon, upload it as an SVG image.
For instructions, see How to use Image elements.

Idea
Tips for using icons
  1. Use icons from the same library or with a similar visual style to keep your design consistent.
  2. Add text labels when an icon’s meaning may not be immediately clear.
  3. Keep icon sizes consistent when they appear in the same menu, toolbar, or group.
  4. Make sure you have permission to use and upload any custom icon.

Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.