Inkpop Icons

Inkpop is an open-source set of 300 illustrated icons. Every icon comes in 4 variations (1,200 drawings) and 5 styles: Color, Duotone, Line, Fill and Tint. Pick one of seven tones or pass any hex colour and the fills follow.

The core package has no dependencies and returns plain SVG strings, so it works in any framework. React and Vue get their own components.

Packages

| Package | Version | What it is | Source | | --- | --- | --- | --- | | inkpop | | Icon data, toSvg(), renderBody(), tones, SVG sprites and the <inkpop-icon> web component | packages/core | | @inkpop/react | | <InkpopIcon name> and named components such as HeartIcon | packages/react | | @inkpop/vue | | <InkpopIcon> component and a plugin for Vue 3 | packages/vue |

Svelte, Angular, Solid, Astro and plain HTML use the web component or toSvg().

Usage

React

npm install @inkpop/react

import { RocketIcon, InkpopIcon } from '@inkpop/react';

<RocketIcon variant="duotone" tone="lilac" size={96} animate="float" />
<InkpopIcon name="heart-3" variant="line" />

Vue

npm install @inkpop/vue

<script setup>
import { InkpopIcon } from '@inkpop/vue';
</script>

<template>
  <InkpopIcon name="rocket" variant="duotone" tone="lilac" :size="96" />
</template>

Web component

<script type="module" src="https://unpkg.com/inkpop/src/element.js"></script>

<inkpop-icon name="rocket" variant="duotone" tone="lilac" animate="float"></inkpop-icon>

Plain JavaScript

npm install inkpop

import { toSvg } from 'inkpop';

button.innerHTML = toSvg('rocket', { variant: 'tint', tone: '#6E4BF2', size: 96 });

Features

• Five styles. variant is color, duotone, line, fill or tint.
• Any colour. tone is green, yellow, lilac, pink, blue, peach, ink or any hex colour.
• Four variations. heart, heart-2, heart-3 and heart-4: upright, on the move, with a badge, or glowing.
• Motion. animate is pop, wiggle, float, bounce, spin or twinkle. It respects reduced-motion settings.
• Lottie export. toLottie() returns the animated icon as Lottie JSON.
• 3D depth. depth gives an icon a thick extruded edge, like a die-cut sticker.
• Make your own. inkpop/make turns any outline SVG into the Inkpop style. Try it in the maker.

All options are in the docs.

Develop

npm install
npm test          # core, React and Vue tests
npm run dev       # website at localhost:5173
npm run build     # regenerate icons and build the site to apps/site/dist

The website in apps/site is a React and Vite app with the icon browser, the maker and the docs.

Contributing

To add or change an icon:

1. Draw in source/gen.py on the 120x100 grid using only the palette colors defined there.
2. npm run icons regenerates source/icons.json, the package data, SVG files, sprites and React components.
3. npm test checks that every color maps to a role, so the new icon recolors in all styles.

source/original-set.html holds the 90 original drawings (30 items x 3 variants).

Releases are covered in PUBLISHING.md.

License

Inkpop is free for personal and commercial use under the MIT License.