{
  "name": "Icon",
  "summary": "Mangrove icon set. Use span elements with mg-icon and mg-icon-{name} classes; icons render from SVG data URIs via CSS mask-image.",
  "description": "Mangrove icon set. Use span elements with mg-icon and mg-icon-{name} classes. Icons render from SVG data URIs via CSS mask-image; the icon font is retained only as a fallback for legacy fa-* selectors. The React Icon component accepts five name formats: a bare name (\"globe\") and a legacy mg- prefixed name (\"mg-globe\") both resolve to \"mg-icon mg-icon-globe\"; an already-qualified \"mg-icon-globe\" resolves to the same pair; a legacy \"fa-globe\" resolves to \"mg-icon fa-globe\", keeping the FontAwesome class rather than renaming it; and any name containing a space is treated as a full class string and passed through unchanged. A size prop appends mg-icon--{size}.",
  "docsUrl": "https://mangrove.undrr.org/?path=/docs/components-icons--docs",
  "vanillaHtml": true,
  "props": {
    "className": {
      "type": "string",
      "required": false,
      "default": "''",
      "description": "Additional CSS classes"
    },
    "name": {
      "type": "string",
      "required": true,
      "description": "Icon name - can be just the name (e.g., \"globe\"), fa- prefixed (e.g., \"fa-globe\"), or full class string"
    },
    "size": {
      "type": "'sm' | 'lg' | 'xl'",
      "required": false,
      "description": "Size variant: \"sm\", \"lg\", \"xl\""
    }
  },
  "examples": [
    {
      "name": "Icons",
      "code": "const DefaultIcons = args => (\n  <table className=\"mg-table mg-table--striped mg-table--small\">\n    <thead>\n      <tr>\n        <th scope=\"col\">Icon</th>\n        <th scope=\"col\">Label</th>\n        <th scope=\"col\">Class</th>\n        <th scope=\"col\">Available as of</th>\n        <th scope=\"col\">Source</th>\n      </tr>\n    </thead>\n    <tbody>\n      {args.icons.map(item => (\n        <tr key={item.name}>\n          <td>\n            <Icon name={item.name} />\n          </td>\n          <td>{item.label}</td>\n          <td>\n            <code>{`mg-icon mg-icon-${item.name}`}</code>\n          </td>\n          <td>\n            {item.availableSince ? (\n              <>\n                <code>{item.availableSince}</code>\n                <span\n                  style={{\n                    display: 'block',\n                    fontSize: '0.75em',\n                    marginTop: '0.15rem',\n                    textTransform: 'uppercase',\n                    letterSpacing: '0.05em',\n                  }}\n                >\n                  {item.status || 'new'}\n                </span>\n              </>\n            ) : (\n              'Existing'\n            )}\n          </td>\n          <td>{item.source && <SourceBadge source={item.source} />}</td>\n        </tr>\n      ))}\n    </tbody>\n  </table>\n);"
    },
    {
      "name": "Icon component",
      "code": "const SingleIcon = () => (\n  <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>\n    <div>\n      <Icon name=\"globe\" size=\"lg\" />\n      <p>\n        <code>{'<Icon name=\"globe\" size=\"lg\" />'}</code>\n      </p>\n    </div>\n    <div>\n      <Icon name=\"chart-bar\" />\n      <p>\n        <code>{'<Icon name=\"chart-bar\" />'}</code>\n      </p>\n    </div>\n    <div>\n      <Icon name=\"earthquake\" />\n      <p>\n        <code>{'<Icon name=\"earthquake\" />'}</code> (OCHA)\n      </p>\n    </div>\n  </div>\n);"
    },
    {
      "name": "Colored icons",
      "code": "const ColoredIcons = () => (\n  <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>\n    <div>\n      <h4 style={{ margin: '0 0 0.5rem' }}>\n        Color utilities (<code>mg-u-color--*</code>)\n      </h4>\n      <p style={{ margin: '0 0 0.5rem', fontSize: '0.875rem' }}>\n        Icons inherit <code>color</code>, so the existing{' '}\n        <code>mg-u-color--*</code> utility classes work directly.\n      </p>\n      <p style={{ margin: '0 0 0.5rem', fontSize: '0.875rem' }}>\n        <strong>Note:</strong> icons are shown at their default pairing so the\n        full set of values is visible. Check contrast before using a\n        combination.\n      </p>\n      <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>\n        <div style={{ textAlign: 'center' }}>\n          <Icon name=\"globe\" size=\"xl\" className=\"mg-u-color--interactive\" />\n          <p style={{ fontSize: '0.75rem', margin: '0.25rem 0 0' }}>\n            <code>mg-u-color--interactive</code>\n          </p>\n        </div>\n        <div style={{ textAlign: 'center' }}>\n          <Icon\n            name=\"search\"\n            size=\"xl\"\n            className=\"mg-u-color--interactive-active\"\n          />\n          <p style={{ fontSize: '0.75rem', margin: '0.25rem 0 0' }}>\n            <code>mg-u-color--interactive-active</code>\n          </p>\n        </div>\n        <div style={{ textAlign: 'center' }}>\n          <Icon\n            name=\"exclamation-triangle\"\n            size=\"xl\"\n            className=\"mg-u-color--red-800\"\n          />\n          <p style={{ fontSize: '0.75rem', margin: '0.25rem 0 0' }}>\n            <code>mg-u-color--red-800</code>\n          </p>\n        </div>\n        <div style={{ textAlign: 'center' }}>\n          <Icon name=\"times\" size=\"xl\" className=\"mg-u-color--neutral-500\" />\n          <p style={{ fontSize: '0.75rem', margin: '0.25rem 0 0' }}>\n            <code>mg-u-color--neutral-500</code>\n          </p>\n        </div>\n        <div\n          style={{\n            textAlign: 'center',\n            backgroundColor: '#333',\n            padding: '0.5rem',\n            borderRadius: '4px',\n          }}\n        >\n          <Icon name=\"power-off\" size=\"xl\" className=\"mg-u-color--white\" />\n          <p\n            style={{\n              fontSize: '0.75rem',\n              margin: '0.25rem 0 0',\n              color: '#fff',\n            }}\n          >\n            <code>mg-u-color--white</code>\n          </p>\n        </div>\n      </div>\n    </div>\n    <div>\n      <h4 style={{ margin: '0 0 0.5rem' }}>Inherited from parent</h4>\n      <p style={{ margin: '0 0 0.5rem', fontSize: '0.875rem' }}>\n        Icons inside a colored parent inherit that color automatically.\n      </p>\n      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap' }}>\n        <div\n          className=\"mg-u-color--interactive\"\n          style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n        >\n          <Icon name=\"globe\" size=\"lg\" />\n          <Icon name=\"search\" size=\"lg\" />\n          <Icon name=\"calendar-alt\" size=\"lg\" />\n          <span style={{ fontSize: '0.75rem' }}>\n            <code>mg-u-color--interactive</code> on parent\n          </span>\n        </div>\n        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>\n          <span\n            className=\"mg-tag\"\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: '0.25rem',\n            }}\n          >\n            <Icon name=\"tags\" /> Tag color\n          </span>\n          <a\n            href=\"#\"\n            className=\"mg-cta\"\n            onClick={e => e.preventDefault()}\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: '0.25rem',\n            }}\n          >\n            <Icon name=\"link\" /> Link color\n          </a>\n        </div>\n      </div>\n    </div>\n    <div>\n      <h4 style={{ margin: '0 0 0.5rem' }}>Inline style and links</h4>\n      <p style={{ margin: '0 0 0.5rem', fontSize: '0.875rem' }}>\n        Icons work inside links and inherit the link color. Use inline styles\n        for brand-specific colors.\n      </p>\n      <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}>\n        <a\n          href=\"https://www.facebook.com/ABORIUNDRR\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"UNDRR on Facebook (opens in new tab)\"\n          style={{ color: '#1877f2' }}\n        >\n          <Icon name=\"facebook\" size=\"xl\" />\n        </a>\n        <a\n          href=\"https://www.linkedin.com/company/undrr/\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"UNDRR on LinkedIn (opens in new tab)\"\n          style={{ color: '#0a66c2' }}\n        >\n          <Icon name=\"linkedin\" size=\"xl\" />\n        </a>\n        <a\n          href=\"https://www.youtube.com/@ABORIUNDRR\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"UNDRR on YouTube (opens in new tab)\"\n          style={{ color: '#ff0000' }}\n        >\n          <Icon name=\"youtube\" size=\"xl\" />\n        </a>\n        <a\n          href=\"https://x.com/ABORIUNDRR\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"UNDRR on X (opens in new tab)\"\n          style={{ color: '#000' }}\n        >\n          <Icon name=\"x-social\" size=\"xl\" />\n        </a>\n      </div>\n      <p style={{ fontSize: '0.75rem', margin: '0.5rem 0 0' }}>\n        <code>\n          {\n            '<a href=\"...\" style=\"color: #1877f2\"><span class=\"mg-icon mg-icon-facebook mg-icon--xl\"></span></a>'\n          }\n        </code>\n      </p>\n    </div>\n    <div>\n      <h4 style={{ margin: '0 0 0.5rem' }}>\n        Multi-color (<code>mg-icon--multicolor</code>)\n      </h4>\n      <p style={{ margin: '0 0 0.5rem', fontSize: '0.875rem' }}>\n        By default icons are single-color (via mask). Add{' '}\n        <code>mg-icon--multicolor</code> to render the SVG with its original\n        colors instead.\n      </p>\n      <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>\n        <div style={{ textAlign: 'center' }}>\n          <Icon name=\"sdg-wheel\" size=\"xl\" />\n          <p style={{ fontSize: '0.75rem', margin: '0.25rem 0 0' }}>\n            Default (single-color)\n          </p>\n        </div>\n        <div style={{ textAlign: 'center' }}>\n          <Icon name=\"sdg-wheel\" size=\"xl\" className=\"mg-icon--multicolor\" />\n          <p style={{ fontSize: '0.75rem', margin: '0.25rem 0 0' }}>\n            <code>mg-icon--multicolor</code>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n);"
    }
  ],
  "renderedHtml": [
    {
      "name": "Mangrove icons",
      "html": "<span class=\"mg-icon mg-icon-globe\" aria-hidden=\"true\"></span>\n<span class=\"mg-icon mg-icon-chart-bar\" aria-hidden=\"true\"></span>\n<span class=\"mg-icon mg-icon-file-alt\" aria-hidden=\"true\"></span>\n<span class=\"mg-icon mg-icon-lightbulb\" aria-hidden=\"true\"></span>\n<span class=\"mg-icon mg-icon-cubes\" aria-hidden=\"true\"></span>\n<span class=\"mg-icon mg-icon-user\" aria-hidden=\"true\"></span>"
    }
  ],
  "cssClasses": [
    "mg-icon"
  ],
  "customProperties": {
    "_ai": "Restyle the component by setting these, usually on the component or an ancestor — but check `default` first: a property the component itself declares beats an ancestor, so it has to be set on that element instead. type \"default\" means a plain rule already gives it the value in `default`, and yours replaces it. type \"hook\" means no unconditional rule defines it: `default` is the fallback it resolves to until a wrapper, an inline style or a prop sets it, and a hook with no `default` has no value at all until you give it one. A value a modifier or a media query declares is never published as `default`, because it is not what the component resolves to at rest. `wrapInRgb: true` means the value is sRGB channels (\"255 255 255\"), not a colour — a hex or a keyword there makes the declaration invalid and it drops silently. These are NOT in https://mangrove.undrr.org/tokens.json, which covers theme tokens only.",
    "properties": [
      {
        "name": "--mg-icon-svg",
        "type": "hook",
        "description": "The icon artwork, as an SVG data URI, used as the mask — or as the background image on .mg-icon--multicolor. Each .mg-icon--<name> class sets it, so choose an icon by class; set it yourself only to introduce artwork Mangrove does not ship."
      }
    ]
  },
  "vanillaModule": false,
  "availableIcons": [
    {
      "name": "file-alt",
      "label": "File, Document, Alt",
      "source": "lucide"
    },
    {
      "name": "file",
      "label": "File, Document",
      "source": "lucide"
    },
    {
      "name": "search",
      "label": "Search, Magnify, Find",
      "source": "lucide"
    },
    {
      "name": "envelope",
      "label": "Envelope, Email, Message",
      "source": "lucide"
    },
    {
      "name": "newspaper",
      "label": "Newspaper, News, Article",
      "source": "lucide"
    },
    {
      "name": "chart-bar",
      "label": "Chart, Bar, Graph, Statistics",
      "source": "lucide"
    },
    {
      "name": "bar-chart",
      "label": "Bar Chart, Graph, Statistics",
      "source": "lucide"
    },
    {
      "name": "graduation-cap",
      "label": "Graduation, Cap, Education",
      "source": "lucide"
    },
    {
      "name": "calendar-alt",
      "label": "Calendar, Date, Schedule",
      "source": "lucide"
    },
    {
      "name": "building",
      "label": "Building, Office, Structure",
      "source": "lucide"
    },
    {
      "name": "landmark",
      "label": "Landmark, Building, Monument",
      "source": "lucide"
    },
    {
      "name": "pen-nib",
      "label": "Pen, Nib, Write, Edit",
      "source": "lucide"
    },
    {
      "name": "business-time",
      "label": "Business, Time, Work",
      "source": "lucide"
    },
    {
      "name": "code-branch",
      "label": "Code, Branch, Version Control",
      "source": "lucide"
    },
    {
      "name": "life-ring",
      "label": "Life Ring, Support, Help",
      "source": "lucide"
    },
    {
      "name": "lightbulb",
      "label": "Lightbulb, Idea, Inspiration",
      "source": "lucide"
    },
    {
      "name": "cubes",
      "label": "Cubes, Blocks, 3D",
      "source": "lucide"
    },
    {
      "name": "sort-alpha-down",
      "label": "Sort, Alphabetical, Order",
      "source": "lucide"
    },
    {
      "name": "tags",
      "label": "Tags, Labels, Categories",
      "source": "lucide"
    },
    {
      "name": "power-off",
      "label": "Power Off, Shutdown, Exit",
      "source": "lucide"
    },
    {
      "name": "user",
      "label": "User, Person, Account",
      "source": "lucide"
    },
    {
      "name": "times",
      "label": "Times, Close, Cancel",
      "source": "lucide"
    },
    {
      "name": "link",
      "label": "Link, URL, Connection",
      "source": "lucide"
    },
    {
      "name": "download",
      "label": "Download, Save, Export",
      "source": "lucide",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "external-link",
      "label": "External Link, Open New Tab",
      "source": "lucide",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "filter",
      "label": "Filter, Funnel, Refine",
      "source": "lucide",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "eye",
      "label": "Eye, View, Visibility",
      "source": "lucide",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "refresh",
      "label": "Refresh, Reload, Repeat",
      "source": "lucide",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "plus",
      "label": "Plus, Zoom In, Add",
      "source": "lucide",
      "availableSince": "2026-09-25",
      "status": "new"
    },
    {
      "name": "minus",
      "label": "Minus, Zoom Out, Remove",
      "source": "lucide",
      "availableSince": "2026-09-25",
      "status": "new"
    },
    {
      "name": "pause",
      "label": "Pause, Stop Motion",
      "source": "lucide",
      "availableSince": "2026-09-25",
      "status": "new"
    },
    {
      "name": "play",
      "label": "Play, Resume Motion",
      "source": "lucide",
      "availableSince": "2026-09-25",
      "status": "new"
    },
    {
      "name": "circle-minus",
      "label": "Minus, Zoom Out, Circle",
      "source": "lucide",
      "availableSince": "2026-09-25",
      "status": "new"
    },
    {
      "name": "expand",
      "label": "Expand, Enter Fullscreen",
      "source": "lucide",
      "availableSince": "2026-09-25",
      "status": "new"
    },
    {
      "name": "shrink",
      "label": "Shrink, Exit Fullscreen",
      "source": "lucide",
      "availableSince": "2026-09-25",
      "status": "new"
    },
    {
      "name": "layers",
      "label": "Layers, Map Layers, Overlays",
      "source": "lucide",
      "availableSince": "2026-09-25",
      "status": "new"
    },
    {
      "name": "reload",
      "label": "Reload, Refresh (alias for refresh)",
      "source": "lucide",
      "availableSince": "2026-09-14",
      "status": "alias"
    },
    {
      "name": "analysis",
      "label": "Analysis, Insight, Research",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "assessment",
      "label": "Assessment, Evaluation, Appraisal",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "coordination",
      "label": "Coordination, Collaboration, Joint Work",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "data",
      "label": "Data, Dataset, Information",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "help",
      "label": "Help, Support, Assistance",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "information-management",
      "label": "Information Management, Data Management",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "location",
      "label": "Location, Place, Site",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "monitoring",
      "label": "Monitoring, Observation, Tracking",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "notification",
      "label": "Notification, Alert, Announcement",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "print",
      "label": "Print, Hard Copy, Output",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "public-information",
      "label": "Public Information, Awareness, Communication",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "report",
      "label": "Report, Summary, Findings",
      "source": "ocha",
      "availableSince": "2026-09-14",
      "status": "new"
    },
    {
      "name": "twitter",
      "label": "Twitter / X (alias for x-social)",
      "source": "custom",
      "availableSince": "2026-09-14",
      "status": "alias"
    },
    {
      "name": "clone",
      "label": "Clone, Copy, Duplicate, Clipboard",
      "source": "lucide"
    },
    {
      "name": "globe",
      "label": "Globe, World, Earth",
      "source": "lucide"
    },
    {
      "name": "languages",
      "label": "Languages, Translate, Language Switcher",
      "source": "lucide"
    },
    {
      "name": "share",
      "label": "Share, Social Media",
      "source": "lucide"
    },
    {
      "name": "qrcode",
      "label": "QR Code, Quick Response, Barcode",
      "source": "lucide"
    },
    {
      "name": "rss",
      "label": "RSS, Feed, Subscribe",
      "source": "lucide"
    },
    {
      "name": "left",
      "label": "Left arrow",
      "source": "lucide"
    },
    {
      "name": "right",
      "label": "Right arrow",
      "source": "lucide"
    },
    {
      "name": "angle-circled-right",
      "label": "Circle right arrow",
      "source": "lucide"
    },
    {
      "name": "angle-circled-left",
      "label": "Circle left arrow",
      "source": "lucide"
    },
    {
      "name": "menu",
      "label": "Menu, Hamburger",
      "source": "lucide"
    },
    {
      "name": "info-circle",
      "label": "Info, Information, Circle",
      "source": "lucide"
    },
    {
      "name": "handshake",
      "label": "Handshake, Partnership, Agreement",
      "source": "lucide"
    },
    {
      "name": "map",
      "label": "Map, Location, Geography",
      "source": "lucide"
    },
    {
      "name": "close",
      "label": "Close, Cancel (alias for times)",
      "source": "lucide"
    },
    {
      "name": "copy",
      "label": "Copy, Duplicate (alias for clone)",
      "source": "lucide"
    },
    {
      "name": "arrow-left",
      "label": "Arrow left (alias for left)",
      "source": "lucide"
    },
    {
      "name": "arrow-right",
      "label": "Arrow right (alias for right)",
      "source": "lucide"
    },
    {
      "name": "hamburger",
      "label": "Hamburger menu (alias for menu)",
      "source": "lucide"
    },
    {
      "name": "calendar",
      "label": "Calendar (alias for calendar-alt)",
      "source": "lucide"
    },
    {
      "name": "exclamation-triangle",
      "label": "Warning, Alert, Triangle",
      "source": "lucide"
    },
    {
      "name": "circle-plus",
      "label": "Add, Plus, Circle",
      "source": "lucide"
    },
    {
      "name": "user-circle",
      "label": "User, Account, Circle",
      "source": "lucide"
    },
    {
      "name": "user-tag",
      "label": "User, Tag, Role",
      "source": "lucide"
    },
    {
      "name": "sign-out-alt",
      "label": "Log Out, Sign Out, Exit",
      "source": "lucide"
    },
    {
      "name": "facebook",
      "label": "Facebook, Social Media",
      "source": "custom"
    },
    {
      "name": "x-social",
      "label": "X, Twitter, Social Media",
      "source": "custom"
    },
    {
      "name": "linkedin",
      "label": "LinkedIn, Social Media",
      "source": "custom"
    },
    {
      "name": "youtube",
      "label": "YouTube, Video, Media",
      "source": "custom"
    },
    {
      "name": "flickr",
      "label": "Flickr, Photo Sharing",
      "source": "custom"
    },
    {
      "name": "earthquake",
      "label": "Earthquake, Seismic",
      "source": "ocha"
    },
    {
      "name": "tsunami",
      "label": "Tsunami, Tidal Wave",
      "source": "ocha"
    },
    {
      "name": "flood",
      "label": "Flood, Flooding",
      "source": "ocha"
    },
    {
      "name": "flash-flood",
      "label": "Flash Flood",
      "source": "ocha"
    },
    {
      "name": "cyclone",
      "label": "Cyclone, Hurricane, Typhoon",
      "source": "ocha"
    },
    {
      "name": "drought",
      "label": "Drought, Water Scarcity",
      "source": "ocha"
    },
    {
      "name": "volcano",
      "label": "Volcano, Eruption",
      "source": "ocha"
    },
    {
      "name": "landslide",
      "label": "Landslide, Mudslide",
      "source": "ocha"
    },
    {
      "name": "storm-surge",
      "label": "Storm Surge, Coastal Flooding",
      "source": "ocha"
    },
    {
      "name": "tornado",
      "label": "Tornado",
      "source": "ocha"
    },
    {
      "name": "heatwave",
      "label": "Heatwave, Extreme Heat",
      "source": "ocha"
    },
    {
      "name": "cold-wave",
      "label": "Cold Wave, Extreme Cold",
      "source": "ocha"
    },
    {
      "name": "heavy-rain",
      "label": "Heavy Rain",
      "source": "ocha"
    },
    {
      "name": "snowfall",
      "label": "Snowfall, Snow",
      "source": "ocha"
    },
    {
      "name": "fire",
      "label": "Fire, Wildfire",
      "source": "ocha"
    },
    {
      "name": "epidemic",
      "label": "Epidemic, Disease Outbreak",
      "source": "ocha"
    },
    {
      "name": "resilience",
      "label": "Resilience",
      "source": "ocha"
    },
    {
      "name": "preparedness",
      "label": "Preparedness",
      "source": "ocha"
    },
    {
      "name": "response",
      "label": "Response, Emergency Response",
      "source": "ocha"
    },
    {
      "name": "affected-population",
      "label": "Affected Population",
      "source": "ocha"
    },
    {
      "name": "people-in-need",
      "label": "People in Need",
      "source": "ocha"
    },
    {
      "name": "internally-displaced",
      "label": "Internally Displaced Persons, IDP",
      "source": "ocha"
    },
    {
      "name": "refugee",
      "label": "Refugee",
      "source": "ocha"
    },
    {
      "name": "shelter",
      "label": "Shelter, Housing",
      "source": "ocha"
    },
    {
      "name": "infrastructure",
      "label": "Infrastructure",
      "source": "ocha"
    },
    {
      "name": "sdg-wheel",
      "label": "SDG Wheel, Sustainable Development Goals",
      "source": "custom"
    }
  ],
  "changelog": [
    {
      "version": "2.3",
      "date": "2026-09-25",
      "notes": "(unisdr/undrr-mangrove#1296): Added `plus`, `minus`, `pause`, `play`, `circle-minus`, `expand`, `shrink` and `layers` Lucide icons for map and media controls.",
      "pr": 1296,
      "prRef": "unisdr/undrr-mangrove#1296",
      "prUrl": null
    },
    {
      "version": "2.2.2",
      "date": "2026-09-18",
      "notes": "(unisdr/undrr-mangrove#1193): The \"Colored icons\" demo carries the same default-pairing contrast note as the colour utility demos. No icon colours changed.",
      "pr": 1193,
      "prRef": "unisdr/undrr-mangrove#1193",
      "prUrl": null
    },
    {
      "version": "2.2.1",
      "date": "2026-09-17",
      "notes": "(unisdr/undrr-mangrove#1192): The legacy `.fa-before` gap uses `padding-inline-end`, so it falls after the icon in RTL.",
      "pr": 1192,
      "prRef": "unisdr/undrr-mangrove#1192",
      "prUrl": null
    },
    {
      "version": "2.2",
      "date": "2026-09-14",
      "notes": "(unisdr/undrr-mangrove#1145): Added a machine-readable icon inventory to the AI manifest and expanded the gallery with high-value utility and OCHA icons, so humans and AI agents can see what’s available at a glance. The gallery table now also shows an availability date/status column for new entries.",
      "pr": 1145,
      "prRef": "unisdr/undrr-mangrove#1145",
      "prUrl": null
    },
    {
      "version": "2.1",
      "date": "2026-04-04",
      "notes": "(undrr-mangrove#906 (unisdr/undrr-mangrove#906)): Icons now render via CSS mask-image backed by Lucide, OCHA, and custom SVG sources. Added `--mg-icon-svg` custom property pattern, `mg-icon--multicolor` modifier, source attribution badges, migration table, and expanded icon set (79 icons including aliases). No breaking change: icon font retained as fallback for `fa-*` selectors.",
      "pr": null,
      "prRef": null,
      "prUrl": null
    },
    {
      "version": "2.0",
      "date": "2026-02-03",
      "notes": "**Breaking:** Icons now use `mg-icon-*` namespaced classes; added Icon React component with automatic class normalization; size modifiers (`.mg-icon--sm`, `.mg-icon--lg`, `.mg-icon--xl`); `fa-*` classes maintained for backwards compatibility",
      "pr": null,
      "prRef": null,
      "prUrl": null
    },
    {
      "version": "1.3",
      "date": "2025-08-06",
      "notes": "Added `.fa-qrcode` icon",
      "pr": null,
      "prRef": null,
      "prUrl": null
    },
    {
      "version": "1.2",
      "date": "2025-05-14",
      "notes": "Added `.fa-menu` icon",
      "pr": null,
      "prRef": null,
      "prUrl": null
    },
    {
      "version": "1.1",
      "date": "2024-10-15",
      "notes": "Added `.fa-left`, `.fa-right`, `.fa-angle-circled-left`, `.fa-angle-circled-right` icons",
      "pr": null,
      "prRef": null,
      "prUrl": null
    },
    {
      "version": "1.0",
      "date": "2022-12-12",
      "notes": "Initial icon font from UNDP fork",
      "pr": null,
      "prRef": null,
      "prUrl": null
    }
  ]
}