React & Vue 3
Named components and a SignById helper for dynamic rendering. Tree-shakeable — only the
signs you import end up in your bundle.
ISO Safety Signs
332 ISO 7010 safety signs for React, Vue 3, Web Components, CSS, and more. Tree-shakeable. Zero dependencies. Fully accessible.
Why ISO Safety Signs?
Section titled “Why ISO Safety Signs?”ISO 7010 is the international standard for safety signs used in workplaces, public spaces, and product labelling worldwide. This library packages all 332 signs as accessible, fully typed components ready to drop into any project.
Web Components
Framework-agnostic Custom Elements. Works with Angular, Svelte, plain HTML — anywhere.
CSS Sprite
Zero JavaScript option. Display any sign 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 |
|---|---|---|
@iso-safety-signs/react |  | React components (inline SVG) |
@iso-safety-signs/vue |  | Vue 3 components (inline SVG) |
@iso-safety-signs/elements |  | Web Components (Custom Elements) |
@iso-safety-signs/css |  | CSS background-image sprite |
@iso-safety-signs/sprite |  | SVG symbol sprite |
@iso-safety-signs/assets |  | Static SVG/PNG/JPG/WebP files |
@iso-safety-signs/core |  | TypeScript data and lookup API |
ISO 7010 Categories
Section titled “ISO 7010 Categories”| Category | Signs | Colour | Description |
|---|---|---|---|
| Emergency | 73 | Green | Emergency exits, first aid, safe conditions |
| Prohibition | 81 | Red | Prohibited actions (no smoking, no entry, etc.) |
| Mandatory | 72 | Blue | Required actions and PPE |
| Warning | 87 | Yellow | Hazard warnings |
| Fire | 19 | Red | Fire equipment and fire extinguisher locations |