Trinil

Mixing icon sets breaks an interface. Each library brings its own grid, its own stroke, its own personality, and icons that almost match never quite do.

Trinil fixes the problem at the source: 1074 open-source icons, drawn by hand by one designer, on one strict 24×24 grid. Same keylines, same stroke logic, same round caps everywhere. A Helvetica of icons: neutral, sharp, made for serious interfaces.

No Iconify, no runtime engine, no dependencies. One file per icon, tree-shakeable, for five frameworks.

Packages

Package	Framework	Install
trinil-react	React 16.8+	npm install trinil-react
trinil-vue	Vue 3	npm install trinil-vue
trinil-svelte	Svelte 3/4/5	npm install trinil-svelte
trinil-solid	SolidJS	npm install trinil-solid
trinil-web	Web Components	npm install trinil-web

All packages ship ESM with named exports. Import an icon, only that icon lands in your bundle.

Usage

React

import { ArrowDown, Check, UsersSearch } from 'trinil-react';

export function App() {
  return (
    <div>
      <ArrowDown size={24} />
      <Check size={32} color="green" strokeWidth={2} />
      <UsersSearch ariaLabel="Search users" />
    </div>
  );
}

Vue 3

<script setup>
import { ArrowDown, Check, UsersSearch } from 'trinil-vue';
</script>

<template>
  <div>
    <ArrowDown :size="24" />
    <Check :size="32" color="green" :stroke-width="2" />
    <UsersSearch aria-label="Search users" />
  </div>
</template>

Svelte, SolidJS and Web Components work the same way: same names, same props.

Props

Prop	Type	Default	Notes
size	number	24	Width/height in pixels
color	string	"currentColor"	Stroke color, inherits from CSS
strokeWidth	number	1.5	Stroke thickness (1 to 2 recommended)
className / class	string	—	CSS classes (React: className, Vue: class)
title	string	—	SVG <title> for accessibility
ariaLabel	string	—	aria-label attribute

Why the icons stay consistent

Every icon renders with the same locked attributes:

fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"      <!-- locked -->
stroke-linejoin="round"     <!-- locked -->
vector-effect="non-scaling-stroke"

stroke-linecap and stroke-linejoin are not customizable, on purpose. Consistency is the product: whatever size or stroke width you pick, all 1074 icons keep the same visual weight and scale predictably. Color inherits from your CSS.

Contributing icons

Source SVGs live in /svg/. The rules that keep the family coherent:

• Strokes, never fills
• viewBox="0 0 24 24"
• Designed for stroke widths between 1 and 2
• Round caps and joins

The generation pipeline validates each file and produces the components for all five frameworks. Build, release and publishing workflows are documented in DEVELOPMENT.md.

License

MIT