icon-retrieval_skill

Overview

This skill searches an icon library and returns SVG strings and metadata for matching icons. It returns up to 5 results by default and allows adjusting the number of matches with a topK parameter. Use it to quickly find, preview, and embed SVG icons in projects.

How this skill works

The skill accepts a keyword or phrase and queries the icon index for relevant matches. It returns a JSON payload that includes the query, requested topK, actual count, and an array of results with source URLs and full SVG strings. Results are limited by topK (default 5) and the service handles network and response errors with clear messages.

When to use it

• You need inline SVGs to embed directly into web pages or components
• Prototyping UI or generating design mockups with consistent iconography
• Automating asset retrieval for build scripts or design systems
• Searching for alternative icons when refining visual metaphors
• Batch fetching multiple icons for dashboards or infographics

Best practices

• Use concise single-word keywords for higher relevance (e.g., "security", "document")
• Try synonyms and related words to expand result variety (e.g., "shield" for security)
• Set topK to a small number (5–10) for quick results or larger for broader exploration
• Validate returned SVGs before production use (check viewBox, dimensions, and IDs)
• Cache retrieved SVGs if you fetch the same icons frequently to reduce network calls

Example use cases

• Embed an SVG icon directly into a React/Vue component from the returned svg string
• Search and download a set of security icons for a product settings page (node ./scripts/search.js 'security' 10)
• Generate an icon palette for an infographic by querying related keywords and choosing the best visuals
• Integrate icon retrieval into a build step to compile necessary SVGs into your design system
• Find alternative icons during a design review by searching several synonyms and comparing results