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.
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.
- Category: Software development
- Effect: Changes data in your accounts
- MCP servers: All SVG Icons MCP (https://koskamo.com/explore/all-svg-icons-mcp)
- Source: Icon Search MCP Server for AI Agents | All SVG Icons (https://allsvgicons.com/mcp/)
- Source quote: "Switch the sidebar icons from Lucide to Hugeicons. allsvgicons search_icons ( query : "dashboard" , prefix : "hugeicons" )"
- Playbook page: https://koskamo.com/explore/use-cases/search-and-integrate-svg-icons-into-code
Prompt: 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.