React & Vue 3
Named components and a PictogramById helper for dynamic rendering. Tree-shakeable — only the
pictograms you import end up in your bundle.
GHS Hazard Pictograms
24 GHS hazard and ADR/UN transport pictograms for React, Vue 3, Web Components, CSS, and more. Tree-shakeable. Zero dependencies. Fully accessible.
Why GHS Hazard Pictograms?
Section titled “Why GHS Hazard Pictograms?”The Globally Harmonized System of Classification and Labelling of Chemicals (GHS) defines hazard pictograms used on chemical containers, safety data sheets (SDS), and product labels worldwide. This library packages all GHS hazard symbols plus ADR/UN transport danger labels as accessible, fully typed components.
Web Components
Framework-agnostic Custom Elements. Works with Angular, Svelte, plain HTML — anywhere.
CSS Sprite
Zero JavaScript option. Display any pictogram with a single class and no JS runtime.
Accessible by default
Every component renders with role="img", aria-labelledby, <title>, and <desc> inside
the SVG.
Packages
Section titled “Packages”| Package | Version | Description |
|---|---|---|
@ghs-hazard-pictograms/react |  | React components (inline SVG) |
@ghs-hazard-pictograms/vue |  | Vue 3 components (inline SVG) |
@ghs-hazard-pictograms/elements |  | Web Components (Custom Elements) |
@ghs-hazard-pictograms/css |  | CSS background-image sprite |
@ghs-hazard-pictograms/sprite |  | SVG symbol sprite |
@ghs-hazard-pictograms/assets |  | Static SVG/PNG/JPG/WebP files |
@ghs-hazard-pictograms/core |  | TypeScript data and lookup API |
GHS Categories
Section titled “GHS Categories”| Category | Pictograms | Description |
|---|---|---|
| Physical hazards | 5 | GHS01–GHS06: explosive, flammable, oxidising, compressed gas, corrosive |
| Health hazards | 3 | GHS07–GHS09: acute toxicity, health hazard, skull and crossbones |
| Environmental hazards | 1 | GHS09: environmental hazard |
| Transport (ADR/UN) | 15 | Dangerous goods labels for road, rail, sea, and air transport |