Medical Device Symbols

Internationally recognized medical device symbols based on ISO 15223-1:2021 for global regulatory compliance. This package provides official medical device symbols as React components that can be easily integrated into web applications, documentation, and medical device labeling worldwide.

Features

• 🌍 Globally Recognized: Based on ISO 15223-1:2021, the international standard for medical device symbols
• 🏛️ Multi-Regulatory Compliance: Supports EU MDR/IVDR, FDA 21 CFR Part 801, Health Canada, and other international frameworks
• ⚛️ React Components: Direct import as React components with TypeScript support
• 📦 Lightweight: Minimal package size with tree-shaking support
• 🔧 Easy Integration: Simple import syntax like popular icon libraries
• 🎨 SVG Format: Scalable vector graphics for crisp display at any size
• 🎯 Prop Support: Full SVG props support with size, color, and event handling
• 🔒 TypeScript Support: Full TypeScript definitions included

Installation

npm install medical-device-symbols

yarn add medical-device-symbols

pnpm add medical-device-symbols

Quick Start

Import individual icon components directly:

import { CautionIcon, CeIcon, ManufacturerIcon } from "medical-device-symbols";

function App() {
  return (
    <div>
      {/* Simple usage with default size (24px) */}
      <CautionIcon />

      {/* Custom size */}
      <CeIcon size={48} />

      {/* Custom styling */}
      <ManufacturerIcon style={{ fontSize: 72, color: "blue" }} />
    </div>
  );
}

Available Icons

Symbol	Component Name	Title
	AtmosphericPressureLimitationIcon	Atmospheric Pressure Limitation
	AuthorizedRepresentativeInTheEuropeanCommunityIcon	Authorized Representative In The European Community
	BatchCodeIcon	Batch Code
	CatalogueNumberIcon	Catalogue Number
	CautionIcon	Caution
	CeBsiIcon	Ce Bsi
	CeIcon	Ce
	ConsultInstructionsForUseIcon	Consult Instructions For Use
	DoNotReUseIcon	Do Not Re Use
	DoNotUseIfPackageIsDamagedIcon	Do Not Use If Package Is Damaged
	FluidPathIcon	Fluid Path
	HumidityLimitationIcon	Humidity Limitation
	InVitroDiagnosticMedicalDeviceIcon	In Vitro Diagnostic Medical Device
	LatexIcon	Latex
	LiquidFilterWithPoreSizeIcon	Liquid Filter With Pore Size
	LowerLimitOfTemperatureIcon	Lower Limit Of Temperature
	ManufactureDateIcon	Manufacture Date
	ManufacturerIcon	Manufacturer
	MdIcon	Md
	NonPyrogenicIcon	Non Pyrogenic
	SerialNumberIcon	Serial Number
	SterileIcon	Sterile
	SterilizedUsingAsepticProcessingTechniquesIcon	Sterilized Using Aseptic Processing Techniques
	SterilizedUsingEthyleneOxideIcon	Sterilized Using Ethylene Oxide
	SterilizedUsingIrradiationIcon	Sterilized Using Irradiation
	SterilizedUsingSteamOrDryHeatIcon	Sterilized Using Steam Or Dry Heat
	TemperatureLimitIcon	Temperature Limit
	UdiIcon	Udi
	UpperLimitOfTemperatureIcon	Upper Limit Of Temperature

Usage

Basic Usage

import { CautionIcon, CeIcon, ManufacturerIcon } from "medical-device-symbols";

function MyComponent() {
  return (
    <div>
      <CautionIcon />
      <CeIcon size={32} />
      <ManufacturerIcon style={{ color: "blue" }} />
    </div>
  );
}

Custom Sizing

import { CautionIcon } from "medical-device-symbols";

function App() {
  return (
    <div>
      {/* Default size (24px) */}
      <CautionIcon />

      {/* Custom pixel size */}
      <CautionIcon size={48} />

      {/* Custom CSS unit */}
      <CautionIcon size="2rem" />

      {/* Using CSS in style prop */}
      <CautionIcon style={{ fontSize: 72 }} />
    </div>
  );
}

Custom Styling and Props

import { CeIcon, ManufacturerIcon } from "medical-device-symbols";

function App() {
  return (
    <div>
      {/* Custom colors */}
      <CeIcon style={{ color: "blue" }} />

      {/* All standard SVG props work */}
      <ManufacturerIcon
        fill="red"
        stroke="black"
        strokeWidth={2}
        opacity={0.8}
      />

      {/* Event handlers */}
      <CeIcon
        onClick={() => console.log("Clicked!")}
        onMouseOver={() => console.log("Hovered!")}
        style={{ cursor: "pointer" }}
      />
    </div>
  );
}

React Component Example

import React from "react";
import {
  CautionIcon,
  CeIcon,
  ManufacturerIcon,
  LotIcon,
  ManufactureDateIcon,
} from "medical-device-symbols";

const MedicalDeviceLabel = () => {
  return (
    <div className="device-label">
      <div className="warning-section">
        <CautionIcon size={32} style={{ color: "#ff6b35" }} />
        <span>Read instructions before use</span>
      </div>

      <div className="compliance-marks">
        <CeIcon size={24} />
        <ManufacturerIcon size={20} />
      </div>

      <div className="device-info">
        <div className="lot-info">
          <LotIcon size={16} />
          <span>LOT: ABC123</span>
        </div>
        <div className="date-info">
          <ManufactureDateIcon size={16} />
          <span>2024-06</span>
        </div>
      </div>
    </div>
  );
};

TypeScript Support

The package includes full TypeScript definitions. All icon components are properly typed:

import { CautionIcon, IconProps } from "medical-device-symbols";

// IconProps interface is available for custom components
const CustomIcon = React.forwardRef<SVGSVGElement, IconProps>(
  ({ size = 24, ...props }, ref) => {
    return <CautionIcon ref={ref} size={size} {...props} />;
  }
);

Props

All icon components accept the following props:

Prop	Type	Default	Description
size	number | string	24	Icon size in pixels or CSS units
...props	React.SVGProps<SVGSVGElement>	-	All standard SVG element props

Common SVG props include:

• fill - Fill color
• stroke - Stroke color
• strokeWidth - Stroke width
• opacity - Opacity (0-1)
• className - CSS class
• style - Inline styles
• onClick, onMouseOver, etc. - Event handlers

International Regulatory Compliance

All symbols in this package are based on ISO 15223-1:2021 - the international standard for medical device symbols. This standard is recognized and referenced by regulatory frameworks worldwide, including:

Primary Standards

• ISO 15223-1:2021 - Medical devices — Symbols to be used with medical device labels, labelling and information to be supplied

Regional & National Regulatory Frameworks

• European Union: EU MDR 2017/745 and EU IVDR 2017/746
• United States: FDA 21 CFR Part 801 - Labeling requirements
• Canada: Medical Devices Regulations (SOR/98-282)
• Japan: Pharmaceutical and Medical Device Act (PMD Act)
• Brazil: ANVISA medical device regulations
• China: NMPA (National Medical Products Administration) requirements
• South Korea: MFDS (Ministry of Food and Drug Safety) regulations
• Australia: TGA (Therapeutic Goods Administration) requirements

Supporting Standards

• IEC 62366-1 - Medical devices application of usability engineering
• IEC 60601-1 - Medical electrical equipment standards

The symbols provided are internationally recognized and should be used according to the respective regulations and standards in your target markets.

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions:

1. Check the GitHub Issues
2. Create a new issue if needed
3. Review the examples in the examples/ directory

getIcon(name: string): string | null

Returns the SVG content for the specified icon name, or null if not found.

getIconNames(): string[]

Returns an array of all available icon names.

getAllIcons(): Record<string, string>

Returns an object with all icons where keys are icon names and values are SVG strings.

Individual Icon Functions

Each icon has its own dedicated function:

• getCautionIcon(): string
• getCeIcon(): string
• getEcIcon(): string
• getLotIcon(): string
• getManufactureDateIcon(): string
• getManufacturerIcon(): string
• getMdIcon(): string
• getReadIfuIcon(): string
• getUdiIcon(): string

Constants

ICON_NAMES

Object containing all icon names as constants for better developer experience:

{
  CAUTION: 'caution',
  CE: 'ce',
  EC: 'ec',
  LOT: 'lot',
  MANUFACTURE_DATE: 'manufacture-date',
  MANUFACTURER: 'manufacturer',
  MD: 'md',
  READ_IFU: 'read-ifu',
  UDI: 'udi'
}

Styling Icons

The SVG icons can be styled using CSS:

.mdr-icon {
  width: 24px;
  height: 24px;
  fill: #333;
}

.mdr-icon.large {
  width: 48px;
  height: 48px;
}

.mdr-icon.warning {
  fill: #ff6b35;
}

.mdr-icon.success {
  fill: #4caf50;
}

Medical Device Regulation Compliance

This package provides symbols that are compliant with:

• ISO 15223-1:2021: The primary international standard for medical device symbols
• EU MDR 2017/745 & IVDR 2017/746: European medical device regulations
• FDA 21 CFR Part 801: US medical device labeling requirements
• Health Canada MDR: Canadian medical device regulations
• Other International Standards: Recognized by regulatory bodies worldwide

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT © Taig Mac Carthy

Support

• 🐛 Report Issues
• 📖 Documentation
• 💬 Discussions

---

Note: This package provides symbols based on ISO 15223-1:2021 for informational and development purposes. While these symbols are internationally recognized, always verify compliance with current regulations in your target markets and consult with regulatory experts for official medical device labeling requirements specific to your jurisdiction.