Foundations

Iconography.

Sprout blends Lineicons Pro (Aceve has a perpetual license) with custom Aceve icons — available in both outlined and solid (filled) styles. All icons are drawn at 24×24 with currentColor so they inherit any text colour automatically. Click any tile to copy.

Icons in context

297 icons · click to copy as <svg>

Adding an icon

New icon or tweaking an existing one? Here's the full path from Figma to production.

Open MiniSprout in Figma

All icons live in the Icon component frames inside the MiniSprout file. Browse what's already there — Lineicons Pro covers most needs. The 297 icons in this library are the canonical set.

Add or update the icon in Figma

Create a new icon component frame following the drawing rules below — 24×24, 2px round-cap stroke, currentColor, single layer. Name it in kebab-case. If you're updating an existing icon, edit the component in place.

Ask in #sprout-design-system

Tag a maintainer. They'll trigger the Figma sync pipeline in the sprout-tokens repo — it runs automatically once a week, but can be kicked off on demand. The pipeline reads all icon frames, exports SVGs, and opens a merge request.

Maintainer reviews and merges the tokens MR

The sync MR lands in the sprout-tokens repo. Once it's merged, a maintainer publishes a new patch version with npm version patch && git push --follow-tags.

Docs site is updated

The docs vendor/ is updated to pick up the new token version. A second MR lands here — once merged, the icon is live on this page and available to every product team.

Shortcut for Lineicons icons: If the icon you need already exists in Lineicons Pro, ask a maintainer to add it to the curated set — no Figma editing required. Search the full Lineicons catalogue and drop the name in the Slack thread.

Install Lineicons

One library, three ways to ship it. Pick the integration that fits your stack.

React package

Recommended for all Aceve product apps.

# install
npm install lineicons-react

# use
import { LiHouse, LiSearch, LiBell } from "lineicons-react";

<LiHouse size={20} />
<LiSearch size={20} className="text-ink-2" />

Tree-shakable per-icon imports. Renders inline SVG so currentColor,size, and any className flow through unchanged.

Webfont via CDN

For docs, marketing pages, or non-React surfaces.

<!-- in <head> -->
<link rel="stylesheet"
  href="https://cdn.lineicons.com/5.0/lineicons.css">

<!-- in markup -->
<i class="lni lni-home"></i>
<i class="lni lni-search"></i>

Sized via font-size, coloured via color. Use only when you can't pull in a JS bundle.

Raw SVG

For Figma, email templates, or one-off design work.

# clone or download
git clone https://github.com/LineiconsHQ/free-icons

# pick the file you need from /svg
free-icons/svg/home-2.svg
free-icons/svg/search.svg

Drop the SVG into your design tool or paste it inline. Stroke is alreadycurrentColor so it inherits Aceve ink colours automatically.

Free for commercial use under the Lineicons license.

Pin to a major version — we currently ship against lineicons@5.

lineicons.com

Drawing rules

Match these when adding a custom icon that has to live alongside Lineicons.

LibraryLineicons 5.x — single source of truth

Viewbox24 × 24 (also rendered cleanly at 16, 18, 20)

Stroke2px, currentColor — never hard-coded

Capsround

Joinsround

Fillnone — outline only, single layer

Optical alignmentTrim to a 22×22 inner box; leave 1px breathing room

Namingkebab-case, verb or noun — match Lineicons where possible

← PreviousElevation Next →Accessibility