Merge pull request #89 from nhsuk/icons

Icons and update card icon examples
nhsuk · Jun 26, 2024 · 7a28aa1 · 7a28aa1
2 parents d7be9d1 + 0fedef7
commit 7a28aa1
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 5 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -11,6 +11,7 @@ import prettier from 'prettier'
 const nunjucksEnv = nunjucks.configure([
   // Our own components which we will ship in the release
   'src/components',
+  'src/styles',
 
   // Includes specific to our documentation
   'docs/_includes',

diff --git a/docs/components/card-links.md b/docs/components/card-links.md
@@ -44,7 +44,7 @@ Only use this variation if you have found a user need for more detailed links on
 
 Icons may help users to understand the meaning of a card link. We currently only use this variation for “Switch profiles” and “Messages” links on the homepage.
 
-[embed icon example]
+{% example "cards/card-link-icon.njk" %}
 
 If you are using icons, they should have [aria labels/hidden text?] so that screen reader users also benefit from this additional prompt on the card link.
 

diff --git a/docs/examples/cards/card-link-icon.njk b/docs/examples/cards/card-link-icon.njk
@@ -0,0 +1,14 @@
+---
+layout: layouts/example.njk
+title: Card link icon
+figmaLink: "https://www.figma.com/file/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?type=design&node-id=128%3A7303&mode=design&t=DLiyCHcTTAYkEDa0-1"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhscardlink--docs"
+---
+
+{% from "card/macro.njk" import card %}
+
+{{ card({
+  title: 'Messages',
+  href: '#',
+  prefixIcon: 'messages'
+}) }}
diff --git a/docs/examples/cards/card-link-with-badge.njk b/docs/examples/cards/card-link-with-badge.njk
@@ -10,6 +10,7 @@ vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?pat
 {{ card({
   title: 'Messages',
   href: '#',
+  prefixIcon: 'messages',
   badgeLarge: {
     count: 4,
     label: 'unread messages'

diff --git a/docs/index.njk b/docs/index.njk
@@ -4,7 +4,6 @@
 
 {%- from 'hero/macro.njk' import hero -%}
 {%- from 'card/macro.njk' import card -%}
-{%- from 'badge/large/macro.njk' import badgeLarge -%}
 
 {% block header %}
   {{ super() }}

diff --git a/src/components/card/card.njk b/src/components/card/card.njk
@@ -1,9 +1,13 @@
 {% from "badge/large/macro.njk" import badgeLarge %}
+{% from "icon/macro.njk" import icon %}
 
 {% set hasBadgeLarge = true if params.badgeLarge.count > 1 %}
 
 <div class="nhsapp-card">
   <div class="nhsapp-card__container">
+    {%- if params.prefixIcon -%}
+      {{ icon(params.prefixIcon) }}
+    {%- endif -%}
     <div class="nhsapp-card__content">
       <a href="{{ params.href }}" class="nhsapp-card__link nhsuk-link--no-visited-state">
         {{ params.title }}
@@ -20,8 +24,6 @@
         label: params.badgeLarge.label
       }) }}
     {% endif %}
-    <svg class="nhsapp-icon app-icon--chevron" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
-      <path d="M8.82264 19.11C8.56264 19.11 8.29264 19.01 8.10264 18.8C7.72264 18.4 7.73264 17.77 8.13264 17.39L13.7426 12.01L8.14264 6.75999C7.74264 6.37999 7.72264 5.74999 8.09264 5.34999C8.47264 4.94999 9.10264 4.92999 9.50264 5.29999L15.8726 11.27C16.0726 11.46 16.1826 11.72 16.1926 11.99C16.2026 12.26 16.0826 12.53 15.8826 12.72L9.51264 18.83C9.32264 19.02 9.07264 19.11 8.82264 19.11Z"></path>
-    </svg>
+    {{ icon('chevronRight') }}
   </div>
 </div>
diff --git a/src/styles/icon/icons.njk b/src/styles/icon/icons.njk
@@ -0,0 +1,173 @@
+{% macro accountFilled() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M12.03 2.01c-5.49 0-9.96 4.49-9.96 10s4.47 10.01 9.96 10.01 9.96-4.49 9.96-10.01-4.47-10-9.96-10ZM12 6.85c1.94 0 3.52 1.58 3.52 3.52s-1.58 3.52-3.52 3.52-3.52-1.58-3.52-3.52S10.06 6.85 12 6.85Zm.03 14.42a9.13 9.13 0 0 1-5.79-2.06v-.33c0-2.41 1.7-4.37 3.8-4.37h3.91c2.09 0 3.8 1.96 3.8 4.37v.38a9.108 9.108 0 0 1-5.72 2.01Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro account() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path d="M12 6.85c-1.94 0-3.52 1.58-3.52 3.52s1.58 3.52 3.52 3.52 3.52-1.58 3.52-3.52S13.94 6.85 12 6.85Z" />
+    <path
+      d="M12.03 2.01c-5.49 0-9.96 4.49-9.96 10s4.47 10.01 9.96 10.01 9.96-4.49 9.96-10.01-4.47-10-9.96-10Zm5.67 16.3c-.25-2.14-1.82-3.8-3.75-3.8h-3.91c-1.91 0-3.48 1.63-3.74 3.75a8.497 8.497 0 0 1-2.73-6.24c0-4.7 3.8-8.51 8.46-8.51s8.46 3.82 8.46 8.51c0 2.49-1.08 4.73-2.79 6.29Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro chevronDown() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M12.07 16.11a1 1 0 0 1-.74-.33L5.22 9.01A.997.997 0 1 1 6.7 7.67l5.36 5.93 5.23-5.93c.37-.41 1-.45 1.41-.09.41.37.45 1 .09 1.41l-5.97 6.77c-.19.21-.46.34-.74.34Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro chevronLeft() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M15.18 18.97c-.25 0-.49-.09-.68-.27l-6.37-5.97c-.2-.19-.31-.45-.32-.72s.11-.54.31-.73l6.37-6.11a.996.996 0 1 1 1.38 1.44l-5.61 5.38 5.6 5.25c.4.38.42 1.01.05 1.41-.2.21-.46.32-.73.32Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro chevronRight() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro chevronUp() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M5.96 16.66a.99.99 0 0 1-.66-.25c-.41-.37-.45-1-.09-1.41l5.97-6.77c.19-.21.46-.34.74-.34.31-.03.56.12.75.33l6.11 6.77a.997.997 0 1 1-1.48 1.34l-5.36-5.93-5.23 5.93c-.2.22-.47.34-.75.34Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro crossFilled() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M22 10c0-.97-.79-1.76-1.76-1.76h-4.48V3.77c0-.97-.79-1.76-1.76-1.76h-4c-.97 0-1.76.79-1.76 1.76v4.48H3.76c-.97 0-1.76.79-1.76 1.76v4c0 .97.79 1.76 1.76 1.76h4.48v4.48c0 .97.79 1.76 1.76 1.76h4c.97 0 1.76-.79 1.76-1.76v-4.48h4.48c.97 0 1.76-.79 1.76-1.76v-4Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro cross() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M14 21.99h-4c-.97 0-1.76-.79-1.76-1.76v-4.48H3.76c-.97 0-1.76-.79-1.76-1.76v-4c0-.97.79-1.76 1.76-1.76h4.48V3.77c0-.97.79-1.76 1.76-1.76h4c.97 0 1.76.79 1.76 1.76v4.48h4.48c.97 0 1.76.79 1.76 1.76v4c0 .97-.79 1.76-1.76 1.76h-4.48v4.48c0 .97-.79 1.76-1.76 1.76ZM3.76 9.64c-.2 0-.36.16-.36.36v4c0 .2.16.36.36.36H8.5c.63 0 1.14.51 1.14 1.14v4.73c0 .2.16.36.36.36h4c.2 0 .36-.16.36-.36V15.5c0-.63.51-1.14 1.14-1.14h4.74c.2 0 .36-.16.36-.36v-4c0-.2-.16-.36-.36-.36H15.5c-.63 0-1.14-.51-1.14-1.14V3.77c0-.2-.16-.36-.36-.36h-4c-.2 0-.36.16-.36.36V8.5c0 .63-.51 1.14-1.14 1.14H3.76Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro heartFilled() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M21.86 6.77c-.34-1.52-1.23-2.79-2.51-3.59-2.38-1.47-5.55-.62-7.23 1.95l-.12.19-.12-.19C10.2 2.56 7.03 1.71 4.65 3.18c-1.28.79-2.17 2.07-2.51 3.59-.35 1.56-.05 3.21.79 4.5a29.79 29.79 0 0 0 3.7 4.91l4.76 5.1c.15.17.37.26.6.26.21 0 .46-.11.6-.26l5.22-5.6c1.09-1.16 2.06-2.46 2.9-3.84l.34-.56c.86-1.32 1.15-2.96.81-4.52Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro heart() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M12 22.05c-.23 0-.45-.1-.6-.26l-4.76-5.1a29.242 29.242 0 0 1-3.7-4.91c-.84-1.29-1.14-2.94-.79-4.5.34-1.52 1.23-2.79 2.51-3.59 2.38-1.47 5.55-.62 7.23 1.95l.12.19.12-.19c1.68-2.57 4.85-3.43 7.23-1.95 1.28.79 2.17 2.07 2.51 3.59.35 1.56.05 3.21-.81 4.52l-.34.56c-.84 1.38-1.81 2.67-2.9 3.84l-5.22 5.6c-.14.15-.39.26-.6.26ZM7.18 4.47c-.61 0-1.21.16-1.75.49-.93.58-1.58 1.51-1.83 2.64-.26 1.17-.04 2.4.6 3.38 1.03 1.7 2.21 3.27 3.53 4.68L12 20.24l4.72-5.07c1.01-1.09 1.93-2.3 2.71-3.59l.35-.58c.65-1 .87-2.23.61-3.4-.25-1.12-.9-2.06-1.83-2.64-1.68-1.04-3.96-.38-5.18 1.5l-.75 1.15c-.28.42-.98.42-1.26 0l-.75-1.15c-.83-1.28-2.15-1.99-3.44-1.99Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro helpFilled() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M12.03 2.01c-5.49 0-9.96 4.49-9.96 10s4.47 10.01 9.96 10.01 9.96-4.49 9.96-10.01-4.47-10-9.96-10Zm.84 14.76c0 .13-.1.23-.23.23h-1.42c-.13 0-.23-.1-.23-.23v-1.38c0-.13.1-.23.23-.23h1.42c.13 0 .23.1.23.23v1.38Zm2.36-6c-.12.29-.26.53-.43.74-.17.2-.36.38-.57.52-.21.14-.41.29-.59.43-.19.14-.35.31-.49.49-.14.19-.25.39-.26.69 0 .06 0 .18-.01.3v.07c-.03.09-.12.16-.22.16h-1.45c-.1 0-.2-.11-.2-.2v-.43c.03-.4.1-.73.23-1s.27-.5.44-.69c.17-.19.34-.35.53-.49s.36-.28.51-.42c.16-.14.29-.29.38-.46.1-.17.14-.38.13-.63 0-.43-.1-.74-.31-.95-.21-.2-.5-.31-.87-.31-.25 0-.46.05-.65.15-.18.1-.33.23-.44.39-.12.16-.2.35-.26.57-.04.16-.07.49-.07.51-.02.09-.1.19-.19.19H8.8a.23.23 0 0 1-.21-.23c.02-.37.11-.78.25-1.14.16-.42.39-.78.68-1.08.29-.31.64-.55 1.06-.72.41-.17.87-.26 1.38-.26.66 0 1.21.09 1.65.27s.8.41 1.06.67c.27.27.46.56.58.87.12.31.17.6.17.87 0 .44-.06.81-.17 1.1Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro help() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M15.24 8.8c-.12-.31-.31-.6-.58-.87s-.62-.49-1.06-.67-.99-.27-1.65-.27c-.51 0-.97.09-1.38.26-.41.17-.76.41-1.06.72-.29.31-.52.67-.68 1.08-.14.35-.23.77-.25 1.14 0 .12.1.22.21.23h1.64c.09 0 .17-.1.19-.19 0-.02.03-.36.07-.51.06-.22.14-.41.26-.57.12-.16.26-.29.44-.39s.4-.15.65-.15c.37 0 .66.1.87.31.21.2.31.52.31.95 0 .25-.04.46-.13.63-.1.17-.23.32-.38.46-.16.14-.33.28-.51.42s-.36.3-.53.49c-.17.19-.31.42-.44.69-.12.27-.2.6-.23 1v.43c0 .09.1.2.2.2h1.45c.1 0 .19-.07.22-.16v-.07c0-.11 0-.23.01-.3.02-.3.12-.51.26-.69s.31-.35.49-.49.38-.29.59-.43c.21-.14.4-.32.57-.52.17-.2.32-.45.43-.74.12-.29.17-.65.17-1.1 0-.27-.06-.56-.17-.87Z"
+    />
+    <rect width="1.88" height="1.84" x="11" y="15.16" class="cls-1" rx=".23" ry=".23" />
+    <path
+      d="M12.03 22.02c-5.49 0-9.96-4.49-9.96-10.01s4.47-10 9.96-10 9.96 4.49 9.96 10.01-4.47 10.01-9.96 10.01Zm0-18.51c-4.66 0-8.46 3.81-8.46 8.5s3.79 8.51 8.46 8.51 8.46-3.82 8.46-8.51-3.8-8.5-8.46-8.5Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro homeFilled() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="m21.82 9.73-1.29-1.07v-.03h-.03l-7.55-6.3c-.56-.45-1.35-.45-1.92.01L3.5 8.63h-.03v.03L2.18 9.73c-.32.26-.36.74-.09 1.06.15.18.36.27.58.27.17 0 .34-.06.48-.17l.33-.27v10.57c0 .41.34.75.75.75h15.56c.41 0 .75-.34.75-.75V10.62l.33.27c.32.27.79.22 1.06-.09.27-.32.22-.79-.09-1.06Zm-7.48 11.45H9.67v-7.55c0-.5.35-.9.78-.9h3.11c.43 0 .78.4.78.9v7.55Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro home() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="m21.82 9.73-1.29-1.07v-.03h-.03l-7.55-6.3c-.56-.45-1.35-.45-1.92.01L3.5 8.63h-.03v.03L2.18 9.73c-.32.26-.36.74-.09 1.06.15.18.36.27.58.27.17 0 .34-.06.48-.17l.33-.27v10.57c0 .41.34.75.75.75h15.56c.41 0 .75-.34.75-.75V10.62l.33.27c.32.27.79.22 1.06-.09.27-.32.22-.79-.09-1.06Zm-11.4 10.7v-6.8c0-.09.04-.14.03-.15h3.09s.06.06.06.15v6.8h-3.17Zm8.62 0h-3.95v-6.8c0-.91-.69-1.65-1.53-1.65h-3.11c-.84 0-1.53.74-1.53 1.65v6.8H4.97V9.36l7.04-5.87 7.03 5.87v11.07Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro messagesFilled() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M21.44 12.66c-.75.34-1.64.67-1.8.73l-7.46 3.05c-.06.02-.12.03-.18.04-.06 0-.12-.01-.18-.04l-7.46-3.05c-.16-.06-1.05-.4-1.8-.73a.397.397 0 0 0-.56.37v8.16c0 .46.37.83.82.83h18.35c.45 0 .82-.37.82-.83v-8.16c0-.29-.3-.48-.56-.37Z"
+    />
+    <path d="M19.53 3.72H4.47c-.41 0-.75.34-.75.75v7.11L12 14.9l8.28-3.32V4.47c0-.41-.34-.75-.75-.75Z" />
+  </svg>
+{% endmacro %}
+
+{% macro messages() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M21.75 11.38a.76.76 0 0 0-.7-.08l-.77.31V4.47c0-.41-.34-.75-.75-.75H4.47c-.41 0-.75.34-.75.75v7.15l-.78-.31a.76.76 0 0 0-.7.08c-.21.14-.33.37-.33.62v9.27c0 .41.34.75.75.75h18.67c.41 0 .75-.34.75-.75v-9.27c0-.25-.12-.48-.33-.62ZM5.22 5.22h13.56v6.97L12 14.94l-6.78-2.75V5.22Zm15.36 15.3H3.41v-7.41l8.31 3.34c.18.07.38.07.56 0l8.3-3.34v7.41Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro messagesUnreadFilled() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M18.23 10.55c-2.63 0-4.77-2.14-4.77-4.77 0-.74.18-1.43.48-2.05H4.47c-.41 0-.75.34-.75.75v7.11l8.38 3.36 8.18-3.42v-1.45c-.62.3-1.32.48-2.05.48Z"
+    />
+    <path
+      d="M21.44 12.66c-.75.34-1.64.67-1.8.73l-7.46 3.05c-.06.02-.12.03-.18.04-.06 0-.12-.01-.18-.04l-7.46-3.05c-.16-.06-1.05-.4-1.8-.73a.397.397 0 0 0-.56.37v8.16c0 .46.37.83.82.83h18.35c.45 0 .82-.37.82-.83v-8.16c0-.29-.3-.48-.56-.37Z"
+    />
+    <circle class="nhsapp-icon__unread-indicator" cx="18.23" cy="5.77" r="3.77" />
+  </svg>
+{% endmacro %}
+
+{% macro messagesUnread() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M21.75 11.38a.76.76 0 0 0-.7-.08l-.77.31V4.47c0-.41-.34-.75-.75-.75H4.47c-.41 0-.75.34-.75.75v7.15l-.78-.31a.76.76 0 0 0-.7.08c-.21.14-.33.37-.33.62v9.27c0 .41.34.75.75.75h18.67c.41 0 .75-.34.75-.75v-9.27c0-.25-.12-.48-.33-.62ZM5.22 5.22h13.56v6.97L12 14.94l-6.78-2.75V5.22Zm15.36 15.3H3.41v-7.41l8.31 3.34c.18.07.38.07.56 0l8.3-3.34v7.41Z"
+    />
+    <circle class="nhsapp-icon__unread-indicator" cx="18.23" cy="5.77" r="3.77" />
+  </svg>
+{% endmacro %}
+
+{% macro switchProfileFilled() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M12.03 2.01c-5.49 0-9.96 4.49-9.96 10s4.47 10.01 9.96 10.01 9.96-4.49 9.96-10.01-4.47-10-9.96-10Zm3.39 4.21c1.77 0 3.21 1.44 3.21 3.21s-1.44 3.21-3.21 3.21-3.21-1.44-3.21-3.21 1.44-3.21 3.21-3.21ZM8.09 9.14c1.39 0 2.52 1.13 2.52 2.52s-1.13 2.52-2.52 2.52-2.52-1.13-2.52-2.52S6.7 9.14 8.09 9.14Zm1.99 11.15c-2.45-.58-4.49-2.24-5.61-4.46.47-.85 1.37-1.43 2.4-1.43h2.58c.39 0 .75.08 1.09.23-.3.55-.49 1.17-.49 1.83l.03 3.82Zm1.94.24c-.49 0-.96-.05-1.42-.13l-.04-3.93c0-1.83 1.49-3.32 3.31-3.32h3.29c1.22 0 2.28.67 2.85 1.66-1.15 3.33-4.29 5.72-7.98 5.72Z"
+    />
+  </svg>
+{% endmacro %}
+
+{% macro switchProfile() %}
+  <svg class="nhsapp-icon" xmlns="http://www.w3.org/2000/svg" height="2em" width="2em" viewBox="0 0 24 24">
+    <path
+      d="M12.03 2.01c-5.49 0-9.96 4.49-9.96 10s4.47 10.01 9.96 10.01 9.96-4.49 9.96-10.01-4.47-10-9.96-10Zm0 1.5c4.66 0 8.46 3.82 8.46 8.51 0 .98-.17 1.91-.47 2.78a3.287 3.287 0 0 0-2.85-1.66h-3.29c-1.83 0-3.31 1.49-3.31 3.32l.04 3.93c-.18-.03-.35-.06-.52-.11l-.03-3.82c0-.67.19-1.29.49-1.83-.33-.14-.7-.23-1.09-.23H6.88c-1.03 0-1.93.58-2.4 1.43a8.437 8.437 0 0 1-.91-3.82c0-4.69 3.8-8.5 8.46-8.5Zm2.6 16.6Zm-1.39.32Zm-1.95.06Zm-1.21-.2Zm-5.6-4.45Zm4.68 4.17Zm-.85-.36c-.27-.13-.52-.28-.77-.43.25.16.51.3.77.43Zm8.73-.79a8.44 8.44 0 0 0 1.74-1.74c-.49.66-1.08 1.24-1.74 1.74Zm-2.26 1.2c.35-.12.68-.26 1.01-.43-.33.16-.66.31-1.01.43Zm1.15-.49Zm2.9-2.49c.51-.69.91-1.45 1.2-2.27a8.37 8.37 0 0 1-1.2 2.27Z"
+    />
+    <path
+      d="M8.1 14.17c1.39 0 2.52-1.13 2.52-2.52S9.49 9.13 8.1 9.13s-2.52 1.13-2.52 2.52 1.13 2.52 2.52 2.52Zm7.33-1.54c1.77 0 3.21-1.44 3.21-3.21s-1.44-3.21-3.21-3.21-3.21 1.44-3.21 3.21 1.44 3.21 3.21 3.21Z"
+    />
+  </svg>
+{% endmacro %}
diff --git a/src/styles/icon/macro.njk b/src/styles/icon/macro.njk
@@ -0,0 +1,5 @@
+{% import "icon/icons.njk" as iconHtml %}
+
+{% macro icon(iconName) %}
+  {{ iconHtml[iconName]() }}
+{% endmacro %}