Skip to content
Ikions
Explore icons

Introduction

Ikions is an original icon library. Every icon is drawn on a 24 × 24 grid and comes in two variants, Outline and Filled, under one name. The icons ship as plain SVG files and as components for React, Vue and Svelte, all generated from the same source artwork.

homesearchbellcamerawalletmap-pinsparkles
homesearchbellcamerawalletmap-pinsparkles

Packages#

PackageUse it for
@ikions/reactReact and Next.js components
@ikions/vueVue 3 components
@ikions/svelteSvelte 5 components
@ikions/iconsRaw SVG files, SVG sprites and the framework-free toSvg() helper
@ikions/metadataNames, aliases, tags, categories and a ranked search engine

All component packages expose the same props: size, color, variant, strokeWidth and title, plus any standard SVG attribute.

Quick start#

Install the package for your framework:

npm install @ikions/react

Import the icons you need by name. Component names are the icon name in PascalCase followed by Icon, so map-pin becomes MapPinIcon.

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

export function Location() {
  return <MapPinIcon size={20} variant="filled" title="Location" />;
}

Design principles#

  • 24 × 24 grid with a 20 × 20 live area and a 1.75 outline stroke.
  • Soft, consistent corners and round caps and joins.
  • Filled icons are drawn separately: real cutouts, not filled outlines.
  • currentColor everywhere, so icons follow your text colour unless you set color.

The full drawing rules are in Design principles.

Next steps#