Icons
Last updated: 31/03/2022
How to implement
There are several ways to use the Publications Office icons: CSS, SVG or PNG. Below we explain the main implementations.
Embedding CSS
This is the fastest and simplest method. Simply copy and paste the CSS code provided for each icon to insert it into your website. You may then style and size it as desired with CSS.
Example of embedding:
<i class="gs-icon-heart" aria-hidden="true"></i>
Note: Embedding is currently only supported for sites hosted on the Publications Office portal.
Downloading SVG
Downloading SVG files is recommended for use in graphic and web design software.
You may also include SVG files directly in your website using several methods.
External link in a new tab: Learn more about how to include SVG files in websites
Downloading PNG
The PNG format is recommended for documents, presentations and other office software use.
Accessibility aspects
Hiding decorative icons from assistive technologies
Given that often SVG icons are used as decorative images(external link, opens in a new window), the aria-hidden attribute is included and set to true by default in the code provided. This prevents assistive technologies from reading the Unicode characters of the glyph icon CSS (for example \e909). You may modify as necessary based on specific cases.
<i class="gs-icon-upload" aria-hidden="true"></i>
Icon with text link
A common use on websites is adding an icon to a text link. The link label is "Download PDF", the icon remains decorative as the screen reader will read the text label, and we add two elements:
display: inline-blockremoves the underline from the icon- and
margin-right: 0.35remadds space between the icon and the accompanying text.
Download PDF (Example, link disabled)
<a href="#">
<i class="gs-icon-download" aria-hidden="true" style="display: inline-block; margin-right: 0.35rem;"></i>Download PDF
</a>
Additional resources
There are many possibilities, it is best to select the option that best suits the needs of each situation. Below are some resources that explain clearly the different options:
Accessible icons(external link, opens in a new window)
How Can I Make My Icon System Accessible?(external link, opens in a new window)