Getting started

Installation

Pick the package for your framework:

React

npm install @ghs-hazard-pictograms/react

Vue 3

npm install @ghs-hazard-pictograms/vue

Web Components

npm install @ghs-hazard-pictograms/elements

CSS

npm install @ghs-hazard-pictograms/css

Quick start

React

import { Ghs01ExplosivesExplodingBomb, PictogramById } from '@ghs-hazard-pictograms/react';

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

// Dynamic by ID
<PictogramById id="ghs01-explosives-exploding-bomb" width={64} />

Vue 3

<script setup>
import { Ghs01ExplosivesExplodingBomb, PictogramById } from '@ghs-hazard-pictograms/vue';
</script>

<template>
  <Ghs01ExplosivesExplodingBomb :width="64" />
  <PictogramById id="ghs01-explosives-exploding-bomb" :width="64" />
</template>

Web Components

import { defineCustomElements } from '@ghs-hazard-pictograms/elements';
defineCustomElements();

<!-- Generic element -->
<ghs-pictogram pictogram-id="ghs01-explosives-exploding-bomb" width="64"></ghs-pictogram>

<!-- Named element -->
<ghs-ghs01-explosives-exploding-bomb width="64"></ghs-ghs01-explosives-exploding-bomb>

CSS

import '@ghs-hazard-pictograms/css/sprite.css';

<span
  class="ghs-ghs01"
  style="display:inline-block;width:64px;height:64px"
  role="img"
  aria-label="Explosives"
></span>

Finding pictogram IDs

Every pictogram has a slug ID based on its GHS code and name. Browse the Pictogram Gallery to find the sign you need. The ID format is: {code-lowercase}-{name-slugified}, e.g. ghs01-explosives-exploding-bomb.

TypeScript

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

import type { Pictogram, PictogramCategory } from '@ghs-hazard-pictograms/core';

Next steps

• See the full props/attributes for each package in the Packages section.
• Browse all 24 pictograms in the Pictogram Gallery.