Iconoteka MCP server

Iconoteka

A universal, open-source library of precisely designed pictograms.

Website · Figma Plugin · License

Adding icons to your project

Take the icons you need — there's no need to install or clone the whole library.

In Figma — install the plugin, search, drag the icon onto the canvas.

One icon at a time — every icon is a standalone SVG on the CDN:

https://cdn.jsdelivr.net/gh/iconoteka/iconoteka@02.00.15/Icons/Interface/bell-notification-notify-reminder-ring-sound-r-s.svg

The path is Icons/{Category}/{name}-{weight}-{style}.svg, where weight is one of t u l r m s b (thin → bold) and style is s for stroke or f for fill. Categories with spaces need URL-encoding: Files%20%26%20Data.

Inline in your markup — both styles are outlined paths, so an icon is a single with no stroke attributes. Every SVG ships with fill="currentColor", so it inherits the surrounding text colour:

<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M3 15.55C4.675 13.225 5 11.45 5 8.5…" fill="currentColor"/>
</svg>

Swap the weight or style by changing one letter in the filename — the geometry is designed to stay optically balanced across all seven weights.

Framework packages

Icons as components, generated from the same SVGs:

npm install iconoteka-react    # or iconoteka-vue, iconoteka-svelte

import { Bell } from "iconoteka-react";

<Bell />
<Bell weight="bold" variant="fill" size={32} />

weight takes any of the seven, variant is stroke or fill, and anything else is spread onto the . Each icon is its own module, so bundlers drop what you don't import.

Using the full set

icons.json carries every icon and variant in one file — useful for bundling the set into a design system, generating components, or pulling icons at build time.

npm install iconoteka

import icons from "iconoteka" with { type: "json" };  // ESM
const icons = require("iconoteka");                   // CommonJS

Or fetch it from the CDN:

https://cdn.jsdelivr.net/gh/iconoteka/iconoteka@02.00.15/icons.json

Pin the tag rather than @main — jsDelivr caches branch URLs for up to 7 days. The npm package contains icons.json only; the raw SVGs stay in the repo.

{
  "meta": {
    "version": "02.00.09",
    "count": 1300,
    "categories": 23,
    "popular": ["ai", "alert", "bank_card", "bell", "…"]
  },
  "icons": [
    {
      "name": "leaf-ecology-nature-natural-leaves-eco-green-organic-plant-wind",
      "displayName": "Leaf",
      "searchTerms": ["leaf", "ecology", "nature", "natural", "leaves"],
      "category": "Nature",
      "variants": { "regular": { "stroke": "M12 2.5…", "fill": "M12 2.5…" } }
    }
  ]
}

The first segment of name is the icon's identity; the rest are search-only aliases, so match on the identity rather than the full string. Weights are keyed thin, ultralight, light, regular, medium, semibold, bold, each holding a stroke and/or fill path.

A curated selection carries "popular": true, listed by identity in meta.popular. Popular is a flag, not a category — no icon is stored twice.

Design

24-point grid — every icon is built on a 24px grid, so straight lines stay crisp at 24, 48, 96px and beyond, and the set sits comfortably alongside other popular libraries.

Shortened. The full README is on GitHub.