1. Moqups Help Center
  2. Icons
  3. Search & Add
Introduction Search & Add Format, Style & Replace Group & Organize

Search for Icons, and Add Them to the Page

In this article:

Our Icons Library contains several Icon sets: Material Design, Font Awesome, Bootstrap, Feather, Hawcons, Amazon AWS, Azure Services, Kubernetes, Google Cloud, Cisco, RPG Awesome, and Emoji. And, many of these sets come with a variety of themes.

In this article, you’ll learn how to find the icons you need, and add them to the page as objects. We’ll also show you how to duplicate and rename those icons.

Browse icon library

To browse the Icon library, navigate to the Left Sidebar and click on the Icons Tab. The tab will turn blue – and will open the Icons Panel.

At the top of the panel, use the dropdown to select an icon kit, and the submenu arrow to select a specific theme for that kit.

Once you have selected a kit and a theme, the panel will display various icon categories – so you can drill down on a particular subject or action.

You can quickly expand and collapse all categories within an icon set by using the More actions menu, or by holding down Alt/Option when expanding or collapsing a single category.

Search icons

All our icons are tagged, making it easy to search, find, compare and choose the best one for your context.

To search for an icon:

  1. Type a search term into the input to see the number of matches across all libraries.
  2. Click on the ‘matches’ link and select an icon library from the dropdown to see results from that particular set.
  3. Use the dropdown to click on results from different sets without losing your search context.

Add icons to the page

From the Icons Panel, there are two ways to add an icon to your page:

  1. Drag and drop an icon to a specific place on the page
  2. Click on the icon to have it appear in the middle of your viewport

Once you’ve added an icon to the page, it’s easy to add subsequent icons from the same set. Just click on that icon, and in the dimensions section of the Format Panel, under the icon’s name, you’ll find a quick link to the library from which it was added.

Custom icons

Currently, you can’t upload custom icon sets to the Icons library, however we’re actively developing that functionality.

In the meantime, if you have custom icons in SVG format, there’s a quick and easy work-around by using the Templates Panel as a repository.

To upload and add custom icons:

  1. On the left sidebar, click on the Templates Tab to open the Templates Panel.
  2. Click on the Create a new folder button to create a dedicated icon folder.
  3. Name your folder to match your specific icon set.
  4. Drag and drop selected svg icon files from your desktop to the Templates Library.
  5. The library will retain the name of individual icon files so you can search them quickly.
  6. Drag your newly added icons to the page to resize and style them.

Duplicate icons

You can only duplicate icons once they’ve been added to a page – as objects.

There are two ways to duplicate an object:

  • While holding down Alt/Option, click and drag a duplicate away from the original
  • Ctrl/Cmd + D creates a duplicate on the page

Rename icons

You can rename any object on the page in two ways:

  • At the top of the Format Panel, you’ll find the object’s name in blue text; just click on the text to rename.
  • In the Outline Panel, double-click on the object name and type in a new one.

In a later article, we’ll explain how to use the Outline Panel to Group and Organize your objects quickly and effectively.