SVG Icons

SVG Sprite is a technique used to improve the performance of web pages by combining multiple SVG images into a single file. This file is then referenced to display different icons or images from within the sprite.

Change an icon

For example you want to change "facebook" icon.

• Open the file /themes/alysum/assets/img/lib.svg
• find facebook icon, it looks like this:

<symbol id="facebook" viewBox="0 0 288.861 288.861">
    <path d="M167.172,288.861h-62.16V159.347H70.769v-59.48h.....">
</symbol>

• Find a new icon from a source like: flaticon.com
• Download the icon and open the SVG file in any text editor.
• Copy the content inside the <svg>...</svg> tags
• Paste the copied code into the lib.svg file inside the corresponding <symbol> tag, e.g.:
  <symbol id="facebook" viewBox="0 0 288.861 288.861">...</symbol>
• Copy SVG dimensions
  <svg viewBox="0 0 27.965 27.965">
• Update the viewBox dimensions:
  <symbol id="facebook" viewBox="0 0 27.965 27.965">

Now you can use the icon code anywhere in the theme, like this

{include file='components/svg-icon.tpl' id='facebook'}

Icons List