@mappedin/icons

A package providing Mappedin's icon library with CDN-backed SVG assets. Icons are served from a global CDN (North America and Europe regions) and can be looked up by name, type, subtype, category, or tags.

Resources

• Getting Started Guide
• API Reference
• Mappedin Developer Portal
• Demo Keys & Maps
• Developer Forum
• Releases Notes
• License

AI Assistants: Before generating code, read llms.txt for structured API documentation.

Usage

Installation

npm install @mappedin/icons

Quick Start

import { IconService, CdnRegion, IconType } from '@mappedin/icons';

// Initialize with North America CDN (default)
const icons = IconService.initialize();

// Or use the European CDN
// const icons = IconService.initialize(CdnRegion.EU);

// Look up an icon by name
const icon = icons.getByName('information');
console.log(icon.url); // https://cdn.mappedin.com/mappedin-icons/Categories/Locations/Amenities/information.svg
console.log(icon.tags); // ['Information', 'Note']

// Fetch the raw SVG string and safely insert it
const svg = await icons.fetchSvg('information');
IconService.setSvg(document.getElementById('icon-container')!, svg);

Icon Lookup

const icons = IconService.getInstance();

// By name (unique identifier)
const icon = icons.getByName('information');

// By type
const categoryIcons = icons.getByType(IconType.Categories);
const smallIcons = icons.getByType(IconType.Small);

// By subtype
const locationIcons = icons.getBySubtype(IconSubtype.Locations);

// By category
const foodIcons = icons.getByCategory(IconCategory.FoodAndDrink);

// By tags
const washroomIcons = icons.getByTags(['Washroom']);

// All icons
const allIcons = icons.getAll();

Pre-fetching

Pre-fetch icons to cache their SVG content for instant access:

const icons = IconService.getInstance();

// Pre-fetch specific icons
await icons.prefetch(['information', 'elevator-up', 'book']);

// Pre-fetch by type
await icons.prefetchByType(IconType.Small);

// Pre-fetch by subtype
await icons.prefetchBySubtype(IconSubtype.Amenities);

// Pre-fetch by category
await icons.prefetchByCategory(IconCategory.FoodAndDrink);

// Check cache status
icons.isCached('information'); // true

// Fetch returns cached content instantly
const svg = await icons.fetchSvg('information');

Styling Icons with CSS

The SVG files use currentColor for their fill, so you can style them with CSS:

.icon-container {
	color: #ff5733;
	width: 40px;
	height: 40px;
}

const svg = await icons.fetchSvg('information');
IconService.setSvg(document.querySelector('.icon-container')!, svg);

import { IconService, CdnRegion } from '@mappedin/icons';

// EU region
const icons = IconService.initialize(CdnRegion.EU);

Icon Types

• Categories - Icons for map locations and amenities, with subtypes:
  • Locations - Location category icons (e.g., Food, Fashion, Entertainment)
  • Amenities - Amenity icons (e.g., Washrooms, Accessibility)
  • General - General purpose category icons
  • System - System icons (e.g., Elevator, Escalator, Stairs)
• Small - Compact icons designed for floating labels on maps
• Input - Icons for UI input elements
• Metadata - Fallback and miscellaneous icons

API Documentation

Full API documentation is available at docs.mappedin.com.