Lucide Icons MCP

Instructions

Implementation Reference

• src/utils.ts:163-183 (handler)

  Executes the tool logic: finds the icon by normalized name in iconMetadata, generates usage example code if found using IconUsageGenerator, otherwise returns a not-found message.

  async ({ name }) => {
    const icon = iconMetadata.find(
      (i) => i.name.toLowerCase() === name.toLowerCase()
    );
  
    if (!icon) {
      return createTextResponse(
        `Icon "${name}" not found. Use search_icons to find available icons.`
      );
    }
  
    const example = IconUsageGenerator.generate(icon.name);
    return {
      content: [
        {
          type: "text" as const,
          text: example
        }
      ]
    };
  }

• src/utils.ts:160-162 (schema)

  Input schema: requires a 'name' parameter as string (icon name).

  {
    name: z.string().describe("Icon name, e.g. 'home' or 'user'")
  },

• src/utils.ts:156-184 (registration)

  Registers the get_icon_usage_examples tool on the MCP server, specifying name, description, input schema, and handler function.

  // Tool: get_icon_usage_examples
  server.tool(
    "get_icon_usage_examples",
    "Get usage examples for a Lucide React icon",
    {
      name: z.string().describe("Icon name, e.g. 'home' or 'user'")
    },
    async ({ name }) => {
      const icon = iconMetadata.find(
        (i) => i.name.toLowerCase() === name.toLowerCase()
      );
  
      if (!icon) {
        return createTextResponse(
          `Icon "${name}" not found. Use search_icons to find available icons.`
        );
      }
  
      const example = IconUsageGenerator.generate(icon.name);
      return {
        content: [
          {
            type: "text" as const,
            text: example
          }
        ]
      };
    }
  );

• src/utils.ts:68-77 (helper)

  Supporting utility that generates formatted React code example for the given icon, including import, basic usage, and styled props usage.

  class IconUsageGenerator {
    static generate(iconName: string) {
      const componentName = iconName;
      const importLine = `import { ${componentName} } from 'lucide-react';`;
      const basicExample = `<${componentName} />`;
      const propsExample = `<${componentName} size={24} color="#3b82f6" strokeWidth={1.5} />`;
  
      return `${importLine}\n\nfunction Example() {\n  return (\n    <div>\n      {/* Basic usage */}\n      ${basicExample}\n      \n      {/* With props */}\n      ${propsExample}\n    </div>\n  );\n}`;
    }
  }