Getting started

Installation

Pick the package for your framework:

React

npm install @iso-safety-signs/react

Vue 3

npm install @iso-safety-signs/vue

Web Components

npm install @iso-safety-signs/elements

CSS

npm install @iso-safety-signs/css

Quick start

React

import { E001EmergencyExit, SignById } from '@iso-safety-signs/react';

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

// Dynamic by ID
<SignById id="e001-emergency-exit" width={64} />

Vue 3

<script setup>
import { E001EmergencyExit, SignById } from '@iso-safety-signs/vue';
</script>

<template>
  <!-- Named component -->
  <E001EmergencyExit :width="64" />

  <!-- Dynamic by ID -->
  <SignById id="e001-emergency-exit" :width="64" />
</template>

Web Components

import { defineCustomElements } from '@iso-safety-signs/elements';
defineCustomElements();

<!-- Generic element -->
<iso-sign sign-id="e001-emergency-exit" width="64"></iso-sign>

<!-- Named element -->
<iso-e001-emergency-exit width="64"></iso-e001-emergency-exit>

CSS

import '@iso-safety-signs/css/sprite.css';

<span
  class="iso-e001"
  style="display:inline-block;width:64px;height:64px"
  role="img"
  aria-label="Emergency exit"
></span>

Finding sign IDs

Every sign has a slug ID based on its ISO code and name. You can find the ID for any sign in the Sign Gallery — hover over a card to see its description, and the code is shown below each sign.

The ID format is: {code-lowercase}-{name-slugified}, e.g. e001-emergency-exit.

TypeScript

All packages ship full TypeScript types. The core package exports the Sign type and SignCategory union if you need them:

import type { Sign, SignCategory } from '@iso-safety-signs/core';

Next steps

• See the full props/attributes for each package in the Packages section.
• Browse all 332 signs in the Sign Gallery.