@public-information-symbols/css

Installation

npm install @public-information-symbols/css

Importing the stylesheet

Import the sprite CSS once in your project’s entry point or global stylesheet.

@import '@public-information-symbols/css/sprite.css';

Or in a JavaScript/TypeScript entry file:

import '@public-information-symbols/css/sprite.css';

Usage

Add the class pi-{code-lowercase} to any element to display the corresponding symbol as a background image.

<span class="pi-ac-001" role="img" aria-label="Accessible toilets"></span>

The element will display the symbol at its natural size. Override dimensions with CSS:

.pi-ac-001 {
  width: 64px;
  height: 64px;
}

Class name patterns

The class name is always pi- followed by the symbol code in lowercase with hyphens.

Class name	Category	Symbol
pi-ac-001	Accessibility	Full accessibility / accessible toilets
pi-pf-001	Public facilities	Toilets
pi-tf-001	Transportation	Airport
pi-bp-001	Behaviour / policies	No smoking
pi-cf-001	Commercial	Restaurant / café

Accessibility

CSS background images are invisible to screen readers. Always pair the element with an appropriate ARIA role and label:

<!-- Informative symbol -->
<span class="pi-ac-001" role="img" aria-label="Accessible toilets"></span>

<!-- Decorative symbol (hidden from assistive technology) -->
<span class="pi-ac-001" aria-hidden="true"></span>