Publications Office of the EU
Icons - Publications Office Web Guide
DisplayCustomHeader
Dockbar
Icons header

Icons

Last updated: 31/03/2022

General icons

Asset Publisher

audio

backward

basket

bell

bookmark

bookmark-f

caret-down

caret-left

caret-right

caret-up

chevron-down

chevron-left

chevron-right

chevron-up

close

delete

download

duplicate-copy

edit

facebook

facebook-f

filters

forward

global

heart

help-question

home

instagram

link

link-external

linkedin

linkedin-f

log-in

logged-in

menu

metadata

microphone

person

placeholder

play

play-backward

print

refresh

rss

search

skip-to-beginning

skip-to-end

social-share

sticky-note

stop

telephone

twitter

twitter-bird

upload

vcard

video

world

youtube

Icons instructions
 

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.

Icons accessibility aspects
 

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-block removes the underline from the icon
  • and margin-right: 0.35rem adds 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)