SVG Icons

From version 1.8.0, LiveCanvas does fully support inline SVG icons.

These are just icons which are coded as vectorial SVG elements, directly in the HTML of the page.

In order to work, they don't require any extra asset to be loaded in your page. Goodbye icon fonts. Less jank to load. More speed for your site.

This is what such an icon looks like in your page HTML:

 <svg viewBox="0 0 16 16" class="rws-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon">
<path fill-rule="evenodd" d="M1.146 4.854a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H12.5A2.5 2.5 0 0 1 15 6.5v8a.5.5 0 0 1-1 0v-8A1.5 1.5 0 0 0 12.5 5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4z"></path>
</svg>

All our readymade sections and prebuilt starter blocks are now built using inline SVG icons only: we dropped using any icon font - and, yes, for new sites, FontAwesome can also be removed from your theme (you will be able to disable it via a simple Customizer option in Customstrap).

Introducing the inline SVG icons panel

In the LiveCanvas editor, upon clicking any inline SVG icon, a simple panel will be shown, to allow you to set the icon size, color, margins, optional URL to link, and to find the right icon shape picking from various popular libraries:

  • The new Bootstrap icons
  • FontAwesome 5
  • MDI Material Design Icons

Icons sizing

A small dropdown allows you to select the icon sizing strategy:

  • Classic, fixed icon sizing, based on width and height attributes
  • Responsive icon sizing, based on responsive helper classes (.rws-1 to .rws-50 - requires CustomStrap v>2.70)