SVG Icon and Link

The SVG Icon Link is used to display a scalable vector icon that links to another page or external resource. It helps guide users visually while maintaining crisp, high-quality graphics across all screen sizes.

When to Use:

• To link icons to pages, documents, or external URLs

• To enhance navigation with visual elements

• To maintain consistent, scalable icons that don’t lose quality on different devices

How to Add and Apply to a Page

To add this widget to your page, follow the steps in the Manual Guide or watch the Slider Tutorial. Both cover how to insert, configure, and publish widgets so you can get them live on your site quickly.

Slider Tutorial

Manual Tutorial

Step 1: Create the SVG Icon in Content Hub

1. Navigate to your Website Channel, then select Content Hub.
2. Click Add New Content Item.
3. Enter an internal page title and choose Icon (SVG) as the content type.
4. Click Continue, then upload or configure the SVG icon details.
5. Click Save and Publish once complete.

Step 2: Create the SVG Icon Link in Content Hub

1. Once the SVG icon exists, in the Content Hub create a new folder or open an existing one to store SVG icon links.
2. Click Add New Content Item.
3. Enter an internal page title and select SVG Icon Link content type.
4. Click Continue and fill in the needed details for the link (URL, label, etc.).
5. Select the SVG icon you previously created (or make a new one if needed).
6. Click Save and Publish.

Step 3: Apply SVG Icon / Link to a Page

1. In your Website Channel, pick the website you’re editing.
2. Navigate to the page where you want to add the icon.
3. On that page, click the “+” (Add Widget) button and pick Icon Widget (widget name may differ by site).
4. After adding the widget, click the gear (settings) icon to open its configuration.
5. In Widget Section Content, click Select Existing Content Item.
6. From the list, choose the SVG icon/link item you created, then click Select.
7. Finally, click Save and Publish to make it live on your page.