Icons

{% macro icon(name, class) %}
  {% if name == 'home' %}
    <svg class="{{ class }}" viewBox="0 0 11.2 11.2" style="enable-background:new 0 0 11.2 11.2" xml:space="preserve">
      <path d="M6.1.2c-.3-.3-.7-.3-1 0L.2 5.1c-.3.3-.3.7 0 1 .3.3.7.3 1 0l.2-.2v4.6c0 .4.3.7.7.7h1.4c.4 0 .7-.3.7-.7V9.1c0-.4.3-.7.7-.7h1.4c.4 0 .7.3.7.7v1.4c0 .4.3.7.7.7h1.4c.4 0 .7-.3.7-.7V5.9l.2.2c.3.3.7.3 1 0 .3-.3.3-.7 0-1L6.1.2z" />
    </svg>
  {% elseif name == 'logo' %}
    <svg class="{{ class }}" viewBox="0 0 226.8 48.8">
      <path class="st1" d="M47.3 38.8h2.8v8.8c0 .4-.1.5-.5.5H32.5v-9.3h2.6v-1.5s-.1-.2-.2-.2h-9.2v1.7h2.6v9.3H10.9v-9.3h2.8v-7.4H8.6c-.2 0-.5-.1-.7-.3-1.6-1.4-3.2-2.7-4.8-4.1-.2-.2-.3-.4-.3-.6V9.8H0V.5h17.4v9.2h-2.6v6.8h9.6V9.7h-2.5V.5h17.4v9.3h-2.8v6.8h13c.4 0 .5.1.5.5v8.8h-2.8v13ZM16.1 8.4V1.8H1.3v6.6h2.2c.4 0 .6.2.6.6v16.7c0 .3.1.5.3.7 1.3 1.1 2.6 2.3 3.9 3.4.2.2.5.3.7.3h5.9v10.1h-2.8v6.6h14.8v-6.7h-2.6v-4.3h12v4.3h-2.6v6.6h14.8v-6.6h-2.8V24.5h2.8v-6.7H35V8.3h2.8V1.8H23v6.6h2.5v9.4H13.2V8.7c0-.3.1-.3.4-.3h2.3Z"/><path class="st1" d="M23.2 41.4h2.6v4.1H13.5v-4.1h2.8V23.3h-2.8v-4.2h12.3v4.1h-2.5v6.7h14.5v-6.7h-2.6V19h12.3v4.1h-2.8v18.1h2.8v4.1H35.2v-4.1h2.6v-6.8H23.2v6.8Z"/><path class="st1" d="M27 24.6V7.2h-2.6V3h12.3v4.1h-2.8v17.8c0 .4-.1.7-.4.9-1.1.9-2.1 1.8-3.1 2.7-.1 0-.3.2-.4.2H24.4v-4.2H27ZM15 24.5v4.3H9.5c-.2 0-.4 0-.5-.2-1.2-1-2.3-1.9-3.4-2.9-.2-.1-.2-.5-.2-.7V7.1H2.6V3h12.3v4.1h-2.2c-.4 0-.5.1-.5.5v16.5c0 .4.1.5.4.4H15ZM36.4 25.1v3.6h-4.1c1.4-1.2 2.7-2.4 4.1-3.6Z"/><path d="M74.5 48.4V.3h2.7v48h-2.7Z" style="fill:#fff;fill-rule:evenodd"/><path class="st1" d="M97.4 26.5h4.9c.1 1.5 1.6 2.3 4.7 2.3s3.2-.5 3.2-1.3-1.7-1.2-3.8-1.4c-3.4-.4-7.9-.8-7.9-3.8s3.2-4.8 8-4.8 9.1 1.9 9.4 5.2h-4.7c-.2-1.4-1.9-2.3-4.7-2.3s-3 .5-3 1.2 1.9 1.2 4.1 1.4c3.4.4 7.6.9 7.6 3.8s-4.2 4.9-8.4 4.9-9.1-1.8-9.4-5.2ZM124.2 21h-6.8l.7-3.2h18.4l-.7 3.2H129l-2.2 10.3h-4.9l2.2-10.3ZM136.5 25.3c0-.5 0-.9.2-1.4.8-3.9 5-6.4 10.2-6.4s9.1 2.4 9.1 6.4 0 .9-.2 1.4c-.8 3.9-5 6.4-10.2 6.4s-9.1-2.4-9.1-6.4Zm14.4-.5V24c0-2-1.7-3.2-4.3-3.2s-4.6 1.4-5 3.6v.8c0 2 1.7 3.2 4.3 3.2s4.6-1.4 5-3.6ZM159.7 17.8h10.9c3.3 0 5.2 1.6 5.2 4v.9c-.5 2.7-2.9 4.2-6.1 4.2h-7.1l-.9 4.4h-4.8l2.9-13.5Zm4.1 3.1-.6 3h5.8c1.4 0 2-.9 2-1.8s-.6-1.2-1.8-1.2h-5.4ZM112.3 6.4c-.2-1.7-1.8-3.1-4.2-3.1s-4.5 1.3-4.9 3.5v.9c0 2 1.6 3.2 4.2 3.2s4-1 4.8-2.9h4.9c-1.2 4-4.8 6.2-10 6.2s-8.8-2.5-8.8-6.3 0-.9.1-1.4c.8-4 4.8-6.6 10-6.6s8.7 2.5 8.9 6.4h-4.9ZM126.2.4h5.3l4.8 13.5h-5l-.8-2.5h-7.7l-1.8 2.5h-5.3L126.2.4Zm-1.4 8.2h4.8L128.2 4l-3.4 4.6ZM140.9.4h5.1l2.9 4.4 2.9 4.4.9-4.4.9-4.4h4.2l-2.9 13.5h-5.2l-2.9-4.4-2.9-4.4-.9 4.4-.9 4.4h-4.2L140.8.4ZM159.1 6c1.7 0 2.5-.7 2.8-2h-2.4l.8-3.6h4.7l-.7 3.4c-.6 2.6-2.5 4.1-5.6 4l.4-1.8ZM173.1 3.6h-6.8l.7-3.2h18.4l-.7 3.2h-6.8l-2.2 10.3h-4.9L173 3.6ZM101.8 35h2.2l-1.2 5.8h10.6l1.2-5.8h2.2l-2.9 13.5h-2.2l1.3-6.1h-10.6l-1.3 6.1h-2.2l2.9-13.5ZM117.6 42.6c0-.5 0-1 .2-1.5.8-4 4.8-6.4 9.2-6.4s8 2.3 8 6.2 0 1-.2 1.5c-.8 4-4.8 6.4-9.2 6.4s-8-2.3-8-6.2Zm15.1-.5c0-.4.1-.8.1-1.1 0-2.9-2.5-4.6-5.9-4.6s-6.4 1.8-7 5c0 .4-.1.8-.1 1.1 0 2.9 2.5 4.6 5.9 4.6s6.3-1.8 7-5ZM137.1 43c0-.5 0-1 .2-1.6l1.4-6.5h4.8l-1.4 6.8v.8c0 1.8 1.5 2.7 3.5 2.7s3.8-1.1 4.2-3.2l1.5-7.2h4.7l-1.6 7.3c-.9 4.1-4.3 6.5-9.2 6.5s-8.1-2.1-8.1-5.8ZM156.5 43.6h4.9c.1 1.5 1.6 2.3 4.7 2.3s3.2-.5 3.2-1.3-1.7-1.2-3.8-1.4c-3.4-.4-7.9-.8-7.9-3.8s3.2-4.8 8-4.8 9.1 1.9 9.4 5.2h-4.7c-.2-1.4-1.9-2.3-4.7-2.3s-3 .5-3 1.2 1.9 1.2 4.1 1.4c3.4.4 7.6.9 7.6 3.8s-4.2 4.9-8.4 4.9-9.1-1.8-9.4-5.2ZM182.5 36.6h-6.9l.3-1.6H192l-.3 1.6h-7l-2.5 11.8H180l2.5-11.8ZM191.1 42.6c0-.5 0-1 .2-1.5.8-4 4.8-6.4 9.2-6.4s8 2.3 8 6.2 0 1-.2 1.5c-.8 4-4.8 6.4-9.2 6.4s-8-2.3-8-6.2Zm15.1-.5c0-.4.1-.8.1-1.1 0-2.9-2.5-4.6-5.9-4.6s-6.4 1.8-7 5c0 .4-.1.8-.1 1.1 0 2.9 2.5 4.6 5.9 4.6s6.3-1.8 7-5ZM212.3 35h2.5l3.9 5.6 3.9 5.7 1.2-5.7L225 35h2l-2.9 13.5h-2.5l-3.9-5.6-3.9-5.7-1.2 5.7-1.2 5.6h-2l2.9-13.5Z"/>
    </svg>
  {% elseif name == 'play' %}
    <svg class="{{ class }}" viewBox="0 0 12 18">
      <path d="M0 18V0l12 9.5L0 18Z" />
    </svg>
  {% elseif name == 'pause' %}
    <svg class="{{ class }}" viewBox="0 0 11 18">
      <path d="M0 0h3v18H0zM8 0h3v18H8z"/>
    </svg>
  {% elseif name == 'chevron-arrow' %}
    <svg class="{{ class }}" style="enable-background:new 0 0 10 6" viewBox="0 0 10 6">
      <path d="M.3.3c.4-.4 1-.4 1.4 0L5 3.6 8.3.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4 4c-.4.4-1 .4-1.4 0l-4-4C-.1 1.3-.1.7.3.3z" style="fill-rule:evenodd; clip-rule:evenodd;" />
    </svg>
  {% elseif name == 'dots' %}
    <svg class="{{ class }}" viewBox="0 0 438.1 230.9">
      <g><circle cx="5" cy="225.8" r="5"/><circle cx="85.3" cy="225.8" r="5"/><circle cx="25.1" cy="225.8" r="5"/><circle cx="105.4" cy="225.8" r="5"/><circle cx="45.2" cy="225.8" r="5"/><circle cx="125.5" cy="225.8" r="5"/><circle cx="65.2" cy="225.8" r="5"/><circle cx="145.5" cy="225.8" r="5"/><circle cx="165.6" cy="225.8" r="5"/><circle cx="245.9" cy="225.8" r="5"/><circle cx="185.7" cy="225.8" r="5"/><circle cx="266" cy="225.8" r="5"/><circle cx="205.8" cy="225.8" r="5"/><circle cx="286.1" cy="225.8" r="5"/><circle cx="225.8" cy="225.8" r="5"/><circle cx="306.1" cy="225.8" r="5"/><circle cx="74.3" cy="105.4" r="5"/><circle cx="154.6" cy="105.4" r="5"/><circle cx="94.4" cy="105.4" r="5"/><circle cx="174.7" cy="105.4" r="5"/><circle cx="114.4" cy="105.4" r="5"/><circle cx="194.7" cy="105.4" r="5"/><circle cx="134.5" cy="105.4" r="5"/><circle cx="214.8" cy="105.4" r="5"/><circle cx="234.9" cy="105.4" r="5" transform="rotate(-80.8 234.834 105.445)"/><circle cx="315.2" cy="105.4" r="5"/><circle cx="254.9" cy="105.4" r="5"/><circle cx="335.2" cy="105.4" r="5"/><circle cx="275" cy="105.4" r="5"/><circle cx="355.3" cy="105.4" r="5"/><circle cx="295.1" cy="105.4" r="5"/><circle cx="375.4" cy="105.4" r="5"/><circle cx="39.6" cy="165.6" r="5"/><circle cx="119.9" cy="165.6" r="5"/><circle cx="59.7" cy="165.6" r="5"/><circle cx="140" cy="165.6" r="5"/><circle cx="79.8" cy="165.6" r="5"/><circle cx="160.1" cy="165.6" r="5"/><circle cx="99.9" cy="165.6" r="5"/><circle cx="180.2" cy="165.6" r="5"/><circle cx="200.2" cy="165.6" r="5"/><circle cx="280.5" cy="165.6" r="5"/><circle cx="220.3" cy="165.6" r="5"/><circle cx="300.6" cy="165.6" r="5"/><circle cx="240.4" cy="165.6" r="5" transform="rotate(-80.8 240.334 165.64)"/><circle cx="320.7" cy="165.6" r="5"/><circle cx="260.5" cy="165.6" r="5"/><circle cx="340.8" cy="165.6" r="5"/><circle cx="108.9" cy="45.2" r="5"/><circle cx="189.2" cy="45.2" r="5"/><circle cx="129" cy="45.2" r="5"/><circle cx="209.3" cy="45.2" r="5"/><circle cx="149.1" cy="45.2" r="5"/><circle cx="229.4" cy="45.2" r="5"/><circle cx="169.1" cy="45.2" r="5"/><circle cx="249.4" cy="45.2" r="5"/><circle cx="269.5" cy="45.2" r="5"/><circle cx="349.8" cy="45.2" r="5"/><circle cx="289.6" cy="45.2" r="5"/><circle cx="369.9" cy="45.2" r="5"/><circle cx="309.7" cy="45.2" r="5"/><circle cx="390" cy="45.2" r="5"/><circle cx="329.7" cy="45.2" r="5"/><circle cx="410" cy="45.2" r="5"/><circle cx="16.6" cy="205.8" r="5"/><circle cx="96.9" cy="205.8" r="5"/><circle cx="36.6" cy="205.8" r="5"/><circle cx="116.9" cy="205.8" r="5"/><circle cx="56.7" cy="205.8" r="5"/><circle cx="137" cy="205.8" r="5"/><circle cx="76.8" cy="205.8" r="5"/><circle cx="157.1" cy="205.8" r="5"/><circle cx="177.2" cy="205.8" r="5"/><circle cx="257.5" cy="205.8" r="5"/><circle cx="197.2" cy="205.8" r="5"/><circle cx="277.5" cy="205.8" r="5"/><circle cx="217.3" cy="205.8" r="5"/><circle cx="297.6" cy="205.8" r="5"/><circle cx="237.4" cy="205.8" r="5" transform="rotate(-80.8 237.27 205.782)"/><circle cx="317.7" cy="205.8" r="5"/><circle cx="85.8" cy="85.3" r="5"/><circle cx="166.1" cy="85.3" r="5"/><circle cx="105.9" cy="85.3" r="5"/><circle cx="186.2" cy="85.3" r="5"/><circle cx="126" cy="85.3" r="5"/><circle cx="206.3" cy="85.3" r="5"/><circle cx="146" cy="85.3" r="5"/><circle cx="226.3" cy="85.3" r="5"/><circle cx="246.4" cy="85.3" r="5"/><circle cx="326.7" cy="85.3" r="5"/><circle cx="266.5" cy="85.3" r="5"/><circle cx="346.8" cy="85.3" r="5"/><circle cx="286.6" cy="85.3" r="5"/><circle cx="366.9" cy="85.3" r="5"/><circle cx="306.6" cy="85.3" r="5"/><circle cx="386.9" cy="85.3" r="5"/><circle cx="51.2" cy="145.5" r="5"/><circle cx="131.5" cy="145.5" r="5"/><circle cx="71.3" cy="145.5" r="5"/><circle cx="151.6" cy="145.5" r="5"/><circle cx="91.3" cy="145.5" r="5"/><circle cx="171.6" cy="145.5" r="5"/><circle cx="111.4" cy="145.5" r="5"/><circle cx="191.7" cy="145.5" r="5"/><circle cx="211.8" cy="145.5" r="5"/><circle cx="292.1" cy="145.5" r="5"/><circle cx="231.9" cy="145.5" r="5" transform="rotate(-80.8 231.82 145.529)"/><circle cx="312.2" cy="145.5" r="5"/><circle cx="251.9" cy="145.5" r="5"/><circle cx="332.2" cy="145.5" r="5"/><circle cx="272" cy="145.5" r="5"/><circle cx="352.3" cy="145.5" r="5"/><circle cx="120.4" cy="25.1" r="5"/><circle cx="200.7" cy="25.1" r="5"/><circle cx="140.5" cy="25.1" r="5"/><circle cx="220.8" cy="25.1" r="5"/><circle cx="160.6" cy="25.1" r="5"/><circle cx="240.9" cy="25.1" r="5" transform="rotate(-80.8 240.853 25.17)"/><circle cx="180.7" cy="25.1" r="5"/><circle cx="261" cy="25.1" r="5"/><circle cx="281" cy="25.1" r="5"/><circle cx="361.3" cy="25.1" r="5"/><circle cx="301.1" cy="25.1" r="5"/><circle cx="381.4" cy="25.1" r="5"/><circle cx="321.2" cy="25.1" r="5"/><circle cx="401.5" cy="25.1" r="5"/><circle cx="341.3" cy="25.1" r="5"/><circle cx="421.6" cy="25.1" r="5"/><circle cx="28.1" cy="185.7" r="5"/><circle cx="108.4" cy="185.7" r="5"/><circle cx="48.2" cy="185.7" r="5"/><circle cx="128.5" cy="185.7" r="5"/><circle cx="68.3" cy="185.7" r="5"/><circle cx="148.6" cy="185.7" r="5"/><circle cx="88.3" cy="185.7" r="5"/><circle cx="168.6" cy="185.7" r="5"/><circle cx="188.7" cy="185.7" r="5"/><circle cx="269" cy="185.7" r="5"/><circle cx="208.8" cy="185.7" r="5"/><circle cx="289.1" cy="185.7" r="5"/><circle cx="228.9" cy="185.7" r="5"/><circle cx="309.2" cy="185.7" r="5"/><circle cx="248.9" cy="185.7" r="5"/><circle cx="329.2" cy="185.7" r="5"/><circle cx="97.4" cy="65.2" r="5"/><circle cx="177.7" cy="65.2" r="5"/><circle cx="117.4" cy="65.2" r="5"/><circle cx="197.7" cy="65.2" r="5"/><circle cx="137.5" cy="65.2" r="5"/><circle cx="217.8" cy="65.2" r="5"/><circle cx="157.6" cy="65.2" r="5"/><circle cx="237.9" cy="65.2" r="5" transform="rotate(-80.8 237.84 65.253)"/><circle cx="258" cy="65.2" r="5"/><circle cx="338.3" cy="65.2" r="5"/><circle cx="278" cy="65.2" r="5"/><circle cx="358.3" cy="65.2" r="5"/><circle cx="298.1" cy="65.2" r="5"/><circle cx="378.4" cy="65.2" r="5"/><circle cx="318.2" cy="65.2" r="5"/><circle cx="398.5" cy="65.2" r="5"/><circle cx="62.7" cy="125.5" r="5"/><circle cx="143" cy="125.5" r="5"/><circle cx="82.8" cy="125.5" r="5"/><circle cx="163.1" cy="125.5" r="5"/><circle cx="102.9" cy="125.5" r="5"/><circle cx="183.2" cy="125.5" r="5"/><circle cx="123" cy="125.5" r="5"/><circle cx="203.3" cy="125.5" r="5"/><circle cx="223.3" cy="125.5" r="5"/><circle cx="303.6" cy="125.5" r="5"/><circle cx="243.4" cy="125.5" r="5"/><circle cx="323.7" cy="125.5" r="5"/><circle cx="263.5" cy="125.5" r="5"/><circle cx="343.8" cy="125.5" r="5"/><circle cx="283.6" cy="125.5" r="5"/><circle cx="363.9" cy="125.5" r="5"/><circle cx="132" cy="5" r="5"/><circle cx="212.3" cy="5" r="5"/><circle cx="152.1" cy="5" r="5"/><circle cx="232.4" cy="5" r="5" transform="rotate(-80 232.39 5.011)"/><circle cx="172.1" cy="5" r="5"/><circle cx="252.4" cy="5" r="5"/><circle cx="192.2" cy="5" r="5"/><circle cx="272.5" cy="5" r="5"/><circle cx="292.6" cy="5" r="5"/><circle cx="372.9" cy="5" r="5"/><circle cx="312.7" cy="5" r="5"/><circle cx="393" cy="5" r="5"/><circle cx="332.7" cy="5" r="5"/><circle cx="413" cy="5" r="5"/><circle cx="352.8" cy="5" r="5"/><circle cx="433.1" cy="5" r="5"/></g>
    </svg>
  {% elseif name == 'down-arrow' %}
    <svg class="{{ class }}" viewBox="0 0 11.2 11.2">
      <path d="M5.6 11.2 0 6l1.2-1.3L4.7 8V0h1.8v8L10 4.7 11.2 6l-5.6 5.2z"/>
    </svg>
  {% endif %}
{% endmacro %}