Svg/icons

Posted on Oct 10

How to Give Your Claude API App Access to SVG Icons with MCP

#ai #mcp #webdev #tutorial

When building an AI-powered application, connecting a language model to real development assets can be surprisingly useful.

Consider a dashboard builder. A developer describes the interface they want, and the application suggests components, layouts, and icons.

The layout suggestions might be reasonable. But what happens when the model needs to recommend actual SVG icons?

Without access to an icon catalog, it may suggest generic names, invent identifiers, or mix incompatible icon styles.

A better approach is to let the model search a real icon catalog.

In this tutorial, we'll explore how to connect the Claude Messages API to the SVGicons MCP server, allowing Claude to discover icons and recommend consistent icon sets for a user interface.

The problem: AI can suggest icons, but can it find them?

Imagine you're building an analytics dashboard with five navigation items:

Overview
Reports
Activity
Settings
Notifications

You want recognizable icons, but you also want them to share a consistent visual style.

You could manually search an icon library for each item, or ask Claude to suggest icon names.

The second approach is convenient, but there's a limitation: a language model doesn't automatically know which icons are currently available in a particular catalog.

It might recommend an identifier that doesn't exist or combine icons from unrelated families.

Instead, we can connect Claude to a searchable icon catalog using the Model Context Protocol (MCP).

1. How the integration works

MCP allows AI applications to interact with external tools and data sources through a standardized interface.

Anthropic provides an MCP connector for the Claude Messages API. It can communicate with remote MCP servers without requiring you to implement a separate MCP client.

We'll use the SVGicons server:

https://svgicons.com/mcp

The architecture is straightforward:

Your Application
       |
       v
Claude Messages API
       |
       v
MCP Connector
       |
       v
SVGicons MCP Server
       |
       v
Icon Catalog Search
       |
       v
Recommendations returned
to your application

Your application sends a request to Claude.

Claude can use the available SVGicons tools to search for relevant icons, compare candidates, and return recommendations.

The important difference is that recommendations can be based on actual catalog results rather than generated icon names.

2. What you'll need

Before starting, make sure you have:

An Anthropic API key with access to the Claude Messages API.
An active SVGicons Pro subscription.
A valid SVGicons access token for the authenticated MCP workflow.
A terminal capable of running cURL.

SVGicons Pro includes developer integrations such as MCP access.

You can find subscription information on the SVGicons pricing page.

The Anthropic API and SVGicons subscription are separate services, so their access requirements and charges are independent.

Keep both credentials on your application backend rather than exposing them in browser-side code.

3. Connect Claude to the SVGicons MCP server

The Claude Messages API uses two main fields for remote MCP integration:

mcp_servers defines the servers Claude can connect to.

tools defines which MCP tools Claude is allowed to use.

For our example, we're interested in three SVGicons capabilities:

search_icons — find icons matching search terms.
search_icon_sets — discover available icon families.
recommend_icons_for_ui — find candidates for UI elements.

We'll restrict Claude to these discovery tools rather than enabling every available server operation.

Here's an example using cURL.

curl https://api.anthropic.com/v1/messages \
  -H "x-api-key: $ANTHROPIC_API_KEY" \
  -H "anthropic-version: 2023-06-01" \
  -H "anthropic-beta: mcp-client-2025-11-20" \
  -H "content-type: application/json" \
  -d '{
    "model": "YOUR_CLAUDE_MODEL",
    "max_tokens": 1500,
    "messages": [
      {
        "role": "user",
        "content": "Use SVGicons to find icons for an analytics dashboard with Overview, Reports, Activity, Settings, and Notifications. Prefer a consistent outline style. Return real catalog identifiers and explain the choices briefly."
      }
    ],
    "mcp_servers": [
      {
        "type": "url",
        "url": "https://svgicons.com/mcp",
        "name": "svgicons",
        "authorization_token": "YOUR_SVGICONS_ACCESS_TOKEN"
      }
    ],
    "tools": [
      {
        "type": "mcp_toolset",
        "mcp_server_name": "svgicons",
        "default_config": {
          "enabled": false
        },
        "configs": {
          "search_icons": {
            "enabled": true
          },
          "search_icon_sets": {
            "enabled": true
          },
          "recommend_icons_for_ui": {
            "enabled": true
          }
        }
      }
    ]
  }'

Replace the placeholders with your Claude model ID and appropriate credentials.

The authorization_token field passes the access token used to authenticate with the remote MCP server. Ensure that your token is valid for this integration.

In a production application, inject credentials securely from your backend rather than hardcoding them in a request payload stored in source control.

Notice that we explicitly disable tools by default and enable only the three discovery operations.

This gives Claude access to the capabilities needed for our task without exposing unrelated operations.

4. Ask for consistent icon recommendations

Connecting the server is only the first step.

The quality of the recommendations also depends on how clearly you describe your interface requirements.

Compare these two prompts.

A generic request:

Find icons for my dashboard.

A more useful request:

Find icons for Overview, Reports, Activity, Settings, and Notifications. Prefer a single icon family, consistent stroke widths, and an outline style. Return only identifiers found in the SVGicons catalog.

The second prompt provides constraints that matter in real interface design.

It asks Claude to consider consistency across the entire navigation system rather than choosing every icon independently.

An application could also supply requirements such as:

UI context:
- Desktop analytics dashboard
- Left navigation sidebar
- Icons displayed at 20 × 20 px
- Neutral, professional appearance

Requirements:
- Prefer a single icon family
- Consistent visual weight
- Recognizable navigation metaphors
- Return actual catalog identifiers
- Flag unavailable matches

This doesn't guarantee that every recommendation will be perfect.

But it gives Claude a better starting point and lets the icon catalog provide the actual candidates.

5. Validate the results before using them

One important principle when integrating AI into a development workflow is to separate recommendations from implementation.

Even when Claude uses external tools, its final response should not automatically be treated as verified application data.

For example, your application might receive suggestions corresponding to:

Navigation item	Icon concept
Overview	Grid or dashboard
Reports	Chart
Activity	Activity indicator
Settings	Gear
Notifications	Bell

These concepts are illustrative, not verified SVGicons catalog identifiers.

Your application should use the identifiers returned by the actual tool searches.

Before accepting a recommendation, verify that:

The icon exists in the selected catalog.
It belongs to the intended icon family.
Its visual style is compatible with the other selections.
Its licensing terms suit your project.
Its SVG markup can be integrated safely.

That last point matters.

For example, an icon containing hardcoded colors may not adapt correctly to a dark theme.

An SVG intended for use with currentColor may require different handling from one using explicit fills.

Accessibility also remains the application's responsibility. An icon-only button still needs an accessible name.

MCP can help you discover assets, but it doesn't eliminate the need to review how those assets are used.

6. Handle authentication and search failures

A production integration needs to handle more than successful searches.

You might encounter an expired access token, insufficient permissions, an unavailable server, or a search that returns no suitable icons.

Your application should distinguish these situations rather than reporting every failure as "No icons found."

For example:

function getUserMessage(errorType) {
  switch (errorType) {
    case "authentication":
      return "Check your SVGicons access token.";

    case "permission":
      return "Your account does not have access to this operation.";

    case "no_results":
      return "Try different search terms or an alternative icon style.";

    case "service_unavailable":
      return "The icon search service is temporarily unavailable.";

    default:
      return "Unable to complete the icon search.";
  }
}

This is illustrative application logic, not a list of official SVGicons MCP error codes. Your backend should classify actual API and tool responses before invoking it.

You should also consider logging failures, controlling request frequency, and applying sensible timeout limits.

A failed catalog search should never silently turn into a fabricated icon recommendation.

7. When is this approach useful?

Connecting an icon catalog to Claude makes sense when your application needs to interpret design requirements expressed in natural language.

Some examples include:

AI-assisted interface builders

A user describes a screen and receives suggested icons for its components.

Developer tools

An assistant helps developers locate icons without switching between their editor and a browser.

Design system assistants

A tool recommends icons while following an established style or icon family.

Application prototyping

Developers can quickly explore possible icon choices while generating an early interface.

However, MCP isn't always the right solution.

If your application already knows exactly which icon identifiers it needs, a direct API call or a static icon package may be simpler and more predictable.

The benefit of MCP becomes clearer when the request involves interpreting intent, searching external data, and comparing alternatives.

8. Keep the developer in control

The most useful AI development tools don't necessarily automate every decision.

They reduce repetitive work while keeping important choices visible.

For icon selection, a practical workflow might look like this:

1. Developer describes the interface

2. Claude interprets the requirements

3. SVGicons MCP searches the catalog

4. Claude recommends matching icons

5. Application validates identifiers

6. Developer reviews the selections

7. Approved assets enter the UI

This approach combines natural-language interaction with a real source of design assets.

Claude handles interpretation and recommendations.

SVGicons supplies searchable icon resources.

Your application controls validation and integration.

That separation makes the workflow easier to understand, maintain, and extend.

Conclusion

Giving an AI application access to real design assets is more useful than asking a model to invent resources from memory.

With the Claude Messages API and an MCP server such as SVGicons, developers can connect natural-language requests to an actual SVG icon catalog.

The integration is relatively small, but it introduces an important architectural principle: use the language model to interpret requirements, and use external tools to retrieve verifiable data.

For UI development, that can mean less time searching for icons and more consistent results across an interface.

The developer still makes the final design decisions, but the discovery process becomes much easier.

DEV Community