# Icons

We usually use services such as Fontastic, IcoMoon or Fontello to generate SVG sprite file from which we reference images in UI. This gives us the ability to cache this "main" SVG file and also use SVG icons without having to manually inline SVG content into HTML.

## Including icons

If you need icons on this website, make sure to create a Twig component that can be reused in order to avoid having to define path to SVG sprite every time icon is needed in UI:

> Put below code in /wp-content/themes/linde/templates/partials/icon.twig

```twig
{# Example:
    {% include "templates/partials/icon.twig" with { 'name': 'name-of-icon', 'icon_class': 'my-class' } %}
#}

{# Variables:
  name: ""
  class: ""
#}

{% if include_code %}
{{ source( "{{ function('get_frontend_static_asset', 'assets/icons/icons.svg') }}#icon-{{ name }}" ) }}
{% else %}
  <svg class="icon icon-{{ name }} {{ icon_class }}">
    <use xlink:href="{{ function('get_frontend_static_asset', 'assets/icons/icons.svg') }}#icon-{{ name }}"></use>
  </svg>
{% endif %}
```

This example is a good starting point that can be adapted to fit the needs of this website.