Inline SVG Styling
The 3 icons above are added in Webflow Designer as custom SVG and CSS code. They're rendered live in the Designer. You can edit their code by selecting each and click on the Open Code Editor button of the Settings tab, in the Designer.
Each icon is defined by its SVG code, immediately followed by CSS code that is overriding visual properties, or defining new properties, for the icon.
In our examples, you can see that we adjust the stroke color and stroke width for each icon. The code for the Leaf icon is the one reproduced below.
The SVG Code:
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24">
<g class="streamline-leaf"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
fill="none">
<path d=" M14.5 9.499l-12 12.001"/>
<path d=" M22 2s-3.168 28.836-18.659 18.657c-10.179-15.49 18.659-18.657
18.659-18.657zM11.5 17.5h-5v-5M14 13.5h-3.5v-3.5M16 9.5h-1.5v-1.5"/>
</g>
</svg>
The CSS Code:
<style>
.streamline-leaf { stroke:#1abc9c; stroke-width:0.65; }
</style>
Using CSS to style SVG elements, only certain properties can be used, depending on the element. For instance, you can set the fill on a , but not the points.The W3C has a list of properties that outlines which SVG properties can be manipulated by CSS.
<div background-image="ben.png">
<p>killing of a chinese bookie</p>
</div>
.clipped {
-webkit-text-fill-color: transparent;
background-clip: text; }