Add new icons (#169)

* add new icons and class name to each icon
* add icon colour black modifier class

docs/_includes/layouts/icons-example.njk

@@ -16,6 +16,18 @@
       <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/account.svg">account.svg</a></td>
       <td>Account and settings - <a href="/components/top-navigation/">top navigation</a></td>
     </tr>
+    <tr>
+      <td>{{ nhsappIcon('calendar') }}</td>
+      <td>calendar</td>
+      <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/calendar.svg">calendar.svg</a></td>
+      <td>Add to calendar</td>
+    </tr>
+    <tr>
+      <td>{{ nhsappIcon('clock') }}</td>
+      <td>clock</td>
+      <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/clock.svg">clock.svg</a></td>
+      <td>Long stay on appointments</td>
+    </tr>
     <tr>
       <td>{{ nhsappIcon('chevronRight') }}</td>
       <td>chevronRight</td>
@@ -34,6 +46,24 @@
       <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/cross.svg">cross.svg</a></td>
       <td>Services - <a href="/components/bottom-navigation/">bottom navigation</a></td>
     </tr>
+    <tr>
+      <td>{{ nhsappIcon('download') }}</td>
+      <td>download</td>
+      <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/download.svg">download.svg</a></td>
+      <td>Download a document on appointments</td>
+    </tr>
+    <tr>
+      <td>{{ nhsappIcon('email') }}</td>
+      <td>email</td>
+      <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/email.svg">email.svg</a></td>
+      <td>Get a copy of document by email on appointments</td>
+    </tr>
+    <tr>
+      <td>{{ nhsappIcon('filter') }}</td>
+      <td>filter</td>
+      <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/filter.svg">filter.svg</a></td>
+      <td>Filter a list</td>
+    </tr>
     <tr>
       <td>{{ nhsappIcon('heartFilled') }}</td>
       <td>heartFilled</td>
@@ -64,6 +94,12 @@
       <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/home.svg">home.svg</a></td>
       <td>Home - <a href="/components/bottom-navigation/">bottom navigation</a></td>
     </tr>
+    <tr>
+      <td>{{ nhsappIcon('letter') }}</td>
+      <td>letter</td>
+      <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/letter.svg">letter.svg</a></td>
+      <td>Get a copy of document by post on appointments</td>
+    </tr>
     <tr>
       <td>{{ nhsappIcon('messagesFilled') }}</td>
       <td>messagesFilled</td>
@@ -88,6 +124,25 @@
       <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/messages-unread.svg">messages-unread.svg</a></td>
       <td>Messages with unread items - <a href="/components/bottom-navigation/">bottom navigation</a> and <a href="/components/card-links/">card links</a></td>
     </tr>
+    <tr>
+      <td>{{ nhsappIcon('night') }}</td>
+      <td>night</td>
+      <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/night.svg">night.svg</a></td>
+      <td>Overnight stay on appointments</td>
+    </tr>
+    <tr>
+      <td>{{ nhsappIcon('phoneCall') }}</td>
+      <td>phoneCall
+      </td>
+      <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/phone-call.svg">phone-call.svg</a></td>
+      <td>Call to confirm on appointments</td>
+    </tr>
+    <tr>
+      <td>{{ nhsappIcon('sort') }}</td>
+      <td>sort</td>
+      <td><a target="_blank" rel="noopener noreferrer" href="https://github.com/nhsuk/nhsapp-frontend/tree/main/src/assets/icons/messages-unread.svg">sort.svg</a></td>
+      <td>Sort a list</td>
+    </tr>
     <tr>
       <td>{{ nhsappIcon('switchProfile') }}</td>
       <td>switchProfile</td>

docs/components/icons.md

@@ -35,8 +35,12 @@ You can find the [icons in Figma](https://www.figma.com/design/6f2CbcZ7cnpNrtKEc
 
 ## Accessibility
 
-Icons that act as functional buttons should have aria labels, so that they are announced to screen reader users. If an icon is not functional, and it appears alongside supporting text that conveys the same meaning, it may not need alt-text or an aria label. Designers and developers should work together to understand the most accessible option in context, considering [NHS Service Manual accessibility guidance](https://service-manual.nhs.uk/accessibility/design).
+Icons that act as functional buttons should have aria labels, so that they are announced to screen reader users. If an icon is not functional, and it appears alongside supporting text that conveys the same meaning, it may not need alt-text or an aria label.
+
+Designers and developers should work together to understand the most accessible option in context, considering [NHS Service Manual accessibility guidance](https://service-manual.nhs.uk/accessibility/design).
 
 ## Research
 
-The icons used on the top navigation and bottom navigation of the NHS App were well-recognised when shown to users without supporting text in our research sessions. Participants generally understood the meaning of the icons. However, the research supported the need for some icons to have accompanying text to make the meaning clear.
+The icons used on the top navigation and bottom navigation of the NHS App were well-recognised when shown to users without supporting text in our research sessions.
+
+Participants generally understood the meaning of the icons. However, the research supported the need for some icons to have accompanying text to make the meaning clear.