Insert icons as HTML code

You are here:
Estimated reading time: 1 min

As known already, the SVG images have HTML code inside them, in XML-like syntax.

The easiest way of generating the SVG HTML code, is to access My Collection and click any icon. You’ll notice the SVG and SVG INLINE tabs inside:

The first, SVG tab, generates the embed SVG syntax, with the magical help of the <use> tag, which only links to a specific icon, from the IconPress SVG sprite (loaded by default into the footer of your page) eg: https://d.pr/i/AvyZdO .

<svg class="iconpress-icon local_536" viewBox="0 0 512 512" style="color:#525252; font-size:80px;" >
  <title>sync alt</title>
  <use href="#local_536" xlink:href="#local_536"></use>
</svg>

The second SVG INLINE tab, contains the complete SVG code, including paths, shapes and all that.

<svg class="iconpress-icon local_536" viewBox="0 0 512 512" style="color:#525252; font-size:80px;" >
  <title>sync alt</title>
  <path d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"></path>
</svg>

Either of these two are ok, but the embed version is more cleaner.

Was this article helpful?
Dislike 0
Views: 50