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 <path> 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 <svg>. 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.

Advanced optics — deliberate overshoots, density-based weight modularity and optical stroke compensation throughout.

Bracketing system — preserves structural integrity across all seven weights. Unlike stroke-based sets that simply scale outlines, legibility and visual balance hold at both extremes.

System architecture — a structured metaphor hierarchy, a 5° geometric angle rule, tiered corner rounding and modular components keep the library consistent at production scale.

Universality — geometric construction and high visual clarity keep the icons legible across products and industries that demand contrast and structural consistency.

Support

Iconoteka is a free, open-source library created and maintained by one person. Support its future development through a monthly Patreon subscription or a one-time Ko-fi donation.

License

MIT — see LICENSE. Free for personal and commercial use, including in closed-source products. No permission needed, no fee. Credit isn't required, though it's always appreciated.

Author

Built by Oleg Turbaba, Brand Design Director at Clay Global — a multidisciplinary designer working at the intersection of brand identity, digital products and visual experiences.

For enquiries, collaborations, interviews or sponsorships: olegturbaba@gmail.com

Instagram · LinkedIn · Behance

Sharing your work? Mention @iconoteka on Instagram, LinkedIn or X.