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.

    • Related Articles

    • Component Templates in Visily

      This article explains what Component Templates are in Visily and how to use them to build designs faster. What Component Templates are Component Templates are ready-made UI building blocks that help you add detail to your design without creating ...

    • Wireframe Elements in Visily

      Visily provides a wide range of ready-to-use elements for building app and website wireframes. These elements help you create consistent interfaces quickly without designing every component from scratch. Before you start Make sure you have permission ...

    • Diagram Elements in Visily

      Use diagram elements to brainstorm ideas, map processes, and model structured systems directly on your Visily board. You can build a diagram from individual elements or start with a ready-made template. Before you start Make sure you have permission ...

    • How to use Table elements

      Use Table elements to organize information into rows and columns. You can create a blank table, import existing data, paste content from a spreadsheet, or generate sample data with AI. Before you start Make sure you have permission to edit the board ...

    • How to use Menus and Navigation Components

      Use menu and navigation components to organize links and help users move between screens, pages, or sections of an interface. Before you start Make sure you have permission to edit the board and are in design editing mode. You can access menu ...