Search and integrate SVG icons into code
The agent searches for specific icons across multiple libraries, retrieves the SVG code, and updates the project's source files to replace or add icons with consistent styling.
How it works
Changes data in your accountsSoftware development
The agent first reads the MCP documentation to understand available tools. It then uses search_icons to find relevant icons based on a query and optional prefix (library). Next, it uses get_icon to fetch the raw SVG code. Finally, it updates the relevant component files (e.g., React/Vue components) to include the new icon, ensuring style consistency such as size and stroke width.
Prompt
Paste this into an agent that has the servers below connected. Adjust the names and dates to your own.
Prompt for Search and integrate SVG icons into code
Read https://allsvgicons.com/mcp.md and follow it to set up the allsvgicons MCP server in this project. Use the free sign-in unless I give you an API key. When it works, call list_collections to confirm. Search for an icon named 'dashboard' in the 'hugeicons' library. Get the SVG for the first result. Update src/components/Sidebar.tsx to use this icon.MCP servers it needs
Source
The vendor page this playbook is drawn from, and the passage that supports it.
Switch the sidebar icons from Lucide to Hugeicons. allsvgicons search_icons ( query : "dashboard" , prefix : "hugeicons" )Icon Search MCP Server for AI Agents | All SVG Icons