The Complete Production SOP: How to Deploy and Run Iconify Universal Vector Icon Framework in Autonomous AI Agents

---
name: "iconify-universal-icon-framework"
description: "Access over 200,000 open-source vector icons on-demand with Iconify framework."
metadata:
  author: "Iconify"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "use iconify in react"
  - "load icons on demand iconify"
  - "bundle offline icons iconify"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

{
  "dependencies": {
    "@iconify/react": "^5.0.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@iconify-json/lucide": "^1.2.20",
    "@iconify-json/heroicons": "^1.2.2"
  }
}

import React from 'react';
import { Icon } from '@iconify/react';

interface ActionIconButtonProps {
  icon: string;
  label: string;
  onClick: () => void;
}

export const ActionIconButton: React.FC<ActionIconButtonProps> = ({
  icon,
  label,
  onClick,
}) => {
  return (
    <button
      onClick={onClick}
      aria-label={label}
      className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-neutral-900 text-white hover:bg-neutral-800 transition-colors"
    >
      {/* Explicit dimensions prevent Cumulative Layout Shift (CLS) */}
      <Icon icon={icon} width="20" height="20" className="text-emerald-400" />
      <span className="text-sm font-medium">{label}</span>
    </button>
  );
};

import { addCollection } from '@iconify/react';
import lucideIcons from '@iconify-json/lucide/icons.json';
import heroicons from '@iconify-json/heroicons/icons.json';

// Preload icon definitions for air-gapped or offline environments
export function registerOfflineIcons(): void {
  addCollection(lucideIcons);
  addCollection(heroicons);
}