Ikions — Free SVG Icon Library

Every interface deserves a better icon.

Browse and download the icons → ikions.cloud

Ikions is a free icon library with 1,900+ original SVG icons. Every icon is drawn on a 24 × 24 grid and published as a matched Outline and Filled pair, free for personal and commercial use under the Ikions License, with no attribution required.

• Free to use: in websites, apps, products, slides and client work. Ikions is free, not open source: the icons may not be resold or redistributed as a set.
• Two styles per icon: Outline (1.75 stroke, round caps) and Filled (solid silhouettes with real cutouts).
• Works everywhere: copy SVG or JSX, download SVG or PNG, export sprites and ZIPs, or use the React, Vue and Svelte components.
• Customisable: size, colour, stroke width and gradient fills, live on the site.
• Original: every icon is drawn for Ikions; nothing is copied from other icon sets.
• Accessible and tree-shakeable: typed components, SSR-safe, with only the icons you import ending up in your bundle.

Use the icons

1. Open ikions.cloud/icons and search ("arrow", "payment", "weather"…).
2. Pick Outline or Filled, adjust size, colour or gradient.
3. Copy SVG / Copy JSX, or Download SVG / PNG. Select several icons to export a ZIP or sprite.

Each icon is also available as a raw SVG URL:

<img src="https://www.ikions.cloud/api/v1/icons/camera/outline.svg" width="24" height="24" alt="Camera" />

Or install a package from npm:

npm install @ikions/react    # React and Next.js
npm install @ikions/vue      # Vue 3 and Nuxt
npm install @ikions/svelte   # Svelte 5 and SvelteKit
npm install @ikions/icons    # SVG files, sprites and toSvg()

import { CameraIcon } from "@ikions/react";

<CameraIcon size={20} variant="filled" />;

Made by Mike Fernandez · Instagram @dvbmike

---

Development

This repository contains the source artwork, the asset pipeline, the packages and the website.

See docs/catalog-roadmap.md for planned concepts — planned icons are never counted as published.

Repository layout

assets/
  source/<name>/          outline.svg, filled.svg, meta.json — the single source of truth
  categories.json         category registry
  collections.json        curated collections
  synonyms.json           concept words that expand search ("payment" → wallet, card…)
  releases.json           changelog entries
  roadmap.json            planned concepts per category
packages/
  tooling/                validation, optimisation, code generation, review sheets, visual regression
  icons/                  @ikions/icons    — SVG files, sprites, toSvg()
  metadata/               @ikions/metadata — metadata + ranked search engine
  react/                  @ikions/react    — React components
  vue/                    @ikions/vue      — Vue 3 components
  svelte/                 @ikions/svelte   — Svelte 5 components
apps/web/                 Next.js website (explorer, docs, API)
tests/                    Playwright end-to-end tests and the visual baseline
docs/                     icon design specification and roadmap

Generated files (packages/*/src/generated, packages/react|vue/src/icons, packages/svelte/src/icons, packages/icons/{outline,filled,sprite}) are produced by pnpm icons:build. Never edit them by hand.

Requirements

• Node.js 20.11 or newer
• pnpm 9 (npm install -g pnpm@9 or corepack enable)

Getting started

pnpm install
pnpm dev            # builds assets + packages, then starts the website on http://localhost:3000

Scripts

Command	What it does
pnpm icons:validate [names…]	Validate SVG safety, geometry, metadata and naming
pnpm icons:sheet [names or categories…]	Render review contact sheets into review/
pnpm icons:build	Optimise SVGs and generate every package's sources
pnpm icons:visual [--update]	Compare renders against tests/visual/baseline.json
pnpm icons:roadmap	Regenerate docs/catalog-roadmap.md
pnpm build	Full build: assets, packages and website
pnpm test	Unit, package, rendering and visual regression tests
pnpm typecheck	TypeScript across the workspace
pnpm e2e	Playwright tests against a production build (run pnpm build first)

Quality status

Last full measurement (2026-10-26, at 248 icons) against a local production build (next start); to be re-run for the expanded catalog:

Check	Result
Icon validation	248 icons, 496 assets, 0 errors
Unit / package / visual tests	84 passing (tooling 21 incl. geometry and visual regression, icons 9, metadata 14, react 10, vue 3, svelte 4, web 23)
End-to-end (Playwright, desktop + mobile)	29 passing, including axe WCAG 2.2 A/AA scans of key pages in light and dark
Lighthouse desktop (/, /icons, /icons/camera, /docs/react)	Performance 100, Accessibility 100, Best Practices 100, SEO 100
Lighthouse mobile (simulated slow 4G, 4× CPU)	Performance 87–92, Accessibility 100, Best Practices 100, SEO 100; CLS 0; simulated LCP 2.9–3.5 s

Mobile LCP is above the 2.5 s target in Lighthouse's simulation and has not yet been measured with real-user (field) data. Re-run with node tests/lighthouse.mjs while a production server runs on port 3100.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗