How to add and color icons

TeleportHQ has a free library of about 154,000 icons in 170 categories. In the Assets Manager, open the Icons tab, search for an icon (for example cake or instagram), and click or drag it onto your page. To change its color, select the icon, click + next to Background in the right panel, and choose color.

Before you start#

• Icons are free on every plan.
• Icons aren't in the Elements panel. You add them from the Assets Manager.

Add an icon#

1. On the canvas, select the element the icon should go into, for example a container in your footer. With nothing selected, the icon goes at the end of the page.
2. In the left sidebar, click Assets Manager.
3. At the top of the panel, click the Icons tab.
4. Type in the Search box. For example, cake. The line Icons found: N shows how many match, and the categories with matches open.
5. Or scroll through the categories, such as Arrows, Brands, Material or Feather, and click a name to open it.
6. Click an icon to add it. Or drag it onto the canvas, where you want it.

New icons are 24 × 24 px. If the selected element can't hold an icon, such as an image or a button, a click adds the icon right after it. To put an icon inside a button, drag it onto the button.

Change an icon's color#

1. On the canvas, select the icon.
2. In the right panel, on the Visual tab, find Background. For an icon, this section sets the icon's color.
3. Click + next to Background and choose color. A grey color is added.
4. Click the color swatch and pick a color, or pick one of your saved colors. For example, your brand's primary color.

An icon without its own color follows the text color around it: the Text Color of a button or link it sits in, or else your site's main text color. The site-wide part is the editor preference Apply foreground colour to icons, which is on by default. To find it, click the Project settings cog at the bottom of the left sidebar, then open Editor → Preferences → Editing. It's in the Content group. With it off, icons without a color of their own are black.

Change an icon's size#

1. Select the icon.
2. In the right panel, open Size.
3. Set Width and Height, for example 32px each.

There's no separate size control for icons. See How to set an element's width and height.

Check that it worked#

The icon shows on the canvas in the new color and size. Icons are added as editable vector graphics, so they stay sharp at any size.

Troubleshooting#

"No results found. Try again using a different keyword." Try a simpler or different word. For example, cake instead of birthday cake slice.

"Try to be more specific in order to automatically expand the icons." Your search matched more than 1,000 icons (for example arrow), so the categories stay closed. Add another word, or click a category's name to open it.

The Icons tab says "Click an icon to use it for the slider's arrows." You clicked Replace arrow on a slider, so the next icon you click becomes the slider's arrows. Click Cancel on that line to add icons to the page again. See How to create an image slider (carousel).

I can't recolor my own SVG logo this way Only icons from the Icons tab can be recolored in TeleportHQ. SVG files you upload are added as images. See How to use SVG images.

Clicking the Background title doesn't open Reset Values for an icon Hold Alt and click the Background title to reset the icon's color.

Good to know#

• You can't upload your own icons to the Icons tab. Upload an SVG file as an image instead.
• You can also add a border, rounded corners or a shadow to an icon in the right panel. See How to add borders, rounded corners and shadows.