Why Icons Make Your Website More Effective

Visitors decide within a fraction of a second whether your website is worth their time. Icons communicate your services, benefits, and next steps instantly — without requiring a visitor to read a single line of text. The Icon Widget in the Website Builder gives you a library of over 1,000 professional symbols and full control over how each one looks, so your website makes a strong first impression on every screen size.

Use the Icon Widget to draw attention to key services, highlight testimonials, or guide visitors toward your contact options. You can adjust icon size, color, hover effects, and background to match your brand exactly. If the built-in library does not have what you need, you can upload your own icons as SVG files, which stay crisp and sharp at any size without losing resolution.

How to Add the Icon Widget to Your Website

To add an icon to your website, open the Website Builder and add the Icon Widget to the page you want to edit. For step-by-step instructions on adding any widget to a page, see How to Add Widgets to Your Thryv Website.

The screenshot below shows the Icon Widget being placed onto a website page inside the Website Builder. The widget appears as a placeholder block on the page canvas until an icon is selected in the Content Editor.

How to Select and Configure Your Icon

After placing the Icon Widget on the page, the Content Editor opens automatically on the right side of the screen. Inside the Content Editor, you can select which icon to display, add a link to make the icon clickable, add alt text for accessibility, and add a tooltip that appears when a visitor hovers over the icon. To choose an icon, browse the built-in gallery of over 1,000 symbols or upload your own icon as an SVG file.

The screenshot below shows the Content Editor panel open after placing the Icon Widget. The panel displays the icon selection gallery, a search field for finding specific icons, and input fields for adding a link, alt text, and tooltip. The built-in gallery and the SVG upload option are both visible within this panel.

How to Customize the Size, Color, and Layout of Your Icon

Once you have selected your icon in the Content Editor, click the Design tab at the top of the editor panel to open the Design Editor. The Design Editor lets you adjust the icon size, change the icon color, set hover effects that activate when a visitor moves their cursor over the icon, modify the background style, and control the spacing around the widget on the page.

The screenshot below shows the Design Editor panel open for the Icon Widget. The panel displays controls for icon size, icon color, hover effect options, background settings, and widget spacing. These controls appear after clicking the Design tab at the top of the editor panel.

Frequently Asked Questions

What does this article cover?

This article covers how to add the Icon Widget to a page in the Website Builder, how to select an icon from the built-in gallery or upload a custom SVG file, and how to customize the icon's size, color, hover effects, and spacing using the Design Editor. This article does not cover how to add other widget types to your website. For instructions on adding any widget to a page, see How to Add Widgets to Your Thryv Website.

Why should I upload an SVG file instead of a PNG or JPG?

SVG files are vector-based, which means they can be resized to any dimension without losing sharpness or resolution. PNG and JPG files are pixel-based and can appear blurry when scaled up. If you are uploading a custom icon, use an SVG file to ensure the icon looks professional on all screen sizes, including large desktop monitors and high-resolution mobile displays.

Can I make an icon clickable and link it to another page?

Yes. Inside the Content Editor for the Icon Widget, there is a link input field where you can enter the URL of any internal page or external website. When a visitor clicks the icon, the Website Builder will direct the visitor to the URL you entered in the link field.

What is alt text and why should I add it to my icon?

Alt text is a short written description of an image or icon that screen readers use to describe the icon to visitors who are visually impaired. Adding accurate alt text to your icons makes your website more accessible and can also improve your website's search engine visibility. Enter your alt text in the alt text field inside the Content Editor for the Icon Widget.