MCP Server

@kalimahapps/vue-icons-mcp is a standalone Model Context Protocol server that lets AI assistants (Copilot, Cursor, Claude, etc.) search and use icons from the vue-icons library.

This package was previously part of @kalimahapps/vue-icons and is now distributed separately.

Installation

No install required

Add the following to your MCP client configuration:

pnpx

{
  "mcpServers": {
    "vue-icons": {
      "command": "pnpx",
      "args": ["-y", "@kalimahapps/vue-icons-mcp"]
    }
  }
}

npx

{
  "mcpServers": {
    "vue-icons": {
      "command": "npx",
      "args": ["-y", "@kalimahapps/vue-icons-mcp"]
    }
  }
}

Global install

pnpm

pnpm install -g @kalimahapps/vue-icons-mcp

npm

npm install -g @kalimahapps/vue-icons-mcp

Then configure your MCP client:

{
  "mcpServers": {
    "vue-icons": {
      "command": "mcp"
    }
  }
}

Tools

find-icon

Search for icons by name or keyword using fuzzy search.

Parameter	Type	Required	Description
query	string	Yes	Search term for icon name
limit	number	No	Max results to return (default: 5, max: 20)

get-icon-usage-example

Get a ready-to-use Vue 3 code snippet for a specific icon.

Parameter	Type	Required	Description
iconName	string	Yes	Name of the icon

Example output:

<template>
  <div>
    <VueIcon name="bi:alarm" />
    <VueIcon name="bi:alarm" class="icon-class" />
    <VueIcon name="bi:alarm" class="w-6 h-6 text-blue-500" />
  </div>
</template>

<script setup lang="ts">
import VueIcon from '@kalimahapps/vue-icons/VueIcon';
</script>

NPM

@kalimahapps/vue-icons-mcp