SVG Icons

Learn how to get started with SVG Icons.

Overview

This template includes SVG icons that have been added via the embed element.

Inside the embed element we simply add the SVG path which allows us to have control over its color for various states. When using the embed method we are able to control the icons color using the Webflow typography settings, meaning that we can dynamically change the icon and set its hover color without needing to upload a new icon or use some overly complicated method for interaction hovers.

1. To change the style of icon, you can simple a) add a new SVG path into the embed element, or b) delete the embed and add your own image with the same class name

2. To edit the color of the SVG icon, you can simply navigate to the typography color settings and adjust these to suit your color needs

Quick Video Demonstration
https://www.loom.com/share/3cf3fdbeab34450d8de4966456394954