Getting started

Installation

Pick the package for your framework:

sh npm install @public-information-symbols/react

sh npm install @public-information-symbols/vue

sh npm install @public-information-symbols/elements

sh npm install @public-information-symbols/css

Quick start

import {
  Ac001FullAccessibilityOrToiletsAccessible,
  SymbolById,
} from '@public-information-symbols/react';

// Named component
<Ac001FullAccessibilityOrToiletsAccessible width={64} />

// Dynamic by ID
<SymbolById id="ac-001-full-accessibility-or-toilets-accessible" width={64} />

<script setup>
import {
  Ac001FullAccessibilityOrToiletsAccessible,
  SymbolById,
} from '@public-information-symbols/vue';
</script>

<template>
  <Ac001FullAccessibilityOrToiletsAccessible :width="64" />
  <SymbolById id="ac-001-full-accessibility-or-toilets-accessible" :width="64" />
</template>

import { defineCustomElements } from '@public-information-symbols/elements';
defineCustomElements();

<!-- Generic element -->
<pi-symbol symbol-id="ac-001-full-accessibility-or-toilets-accessible" width="64"></pi-symbol>

<!-- Named element -->
<pi-ac-001-full-accessibility-or-toilets-accessible width="64">
</pi-ac-001-full-accessibility-or-toilets-accessible>

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

<span
  class="pi-ac-001"
  style="display:inline-block;width:64px;height:64px"
  role="img"
  aria-label="Full accessibility"
></span>

Finding symbol IDs

Every symbol has a slug ID based on its ISO code and name. Browse the Symbol Gallery to find the symbol you need. The ID format is: {code-lowercase}-{name-slugified}, e.g. ac-001-full-accessibility-or-toilets-accessible.

TypeScript

All packages ship full TypeScript types. The core package exports PISymbol and SymbolCategory if you need them:

import type { PISymbol, SymbolCategory } from '@public-information-symbols/core';

Next steps

See the full props/attributes for each package in the Packages section.
Browse all 178 symbols in the Symbol Gallery.