Draft

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

298 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 522 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

Icon styles

How to use our different functional icon styles:

Outlined — buttons, illustrative, show functions
Solid — mapping (where you are / something in use)

Outlined

Solid

Icon size

Icons are sized relative to the surrounding text — set font-size on the icon element or a parent to resize.

14px

16px

18px

20px

24px

14pxDense UI — data tables, chips, secondary metadata

16pxDefault inline use — body text, form labels

18pxSidebar navigation, section headers

20pxCard actions, primary labels

24pxCanonical size — standalone or hero contexts

Icons in context

Want to see more? Select the button below to explore additional examples of how icons are used in context, including common patterns, placements, and combinations across the interface.

Icons in context

Icons used in context across navigation, an app launcher, buttons and actions, form inputs, and sidebar navigation

Usage — do's and don'ts

Common mistakes and patterns to follow when using icons in Aceve products.

Use a recognizable, universally understood icon to represent an action or concept.

Don't

Don't use ambiguous icons that users may not recognize — always prefer familiar shapes.

Delete

Match the icon to the action — a trash icon belongs on a destructive delete action.

Save file

Don't

Don't pair a destructive icon with a neutral or unrelated label — the mismatch confuses users.

Use icons to enhance clarity, not just decorate.

Don't use icons alone for critical actions — always pair with a visible label.

Keep icon style consistent — use outlined or solid icons, not both in the same context.

Don't combine filled, outlined, and hand-drawn styles without clear intent.

Give each icon a specific and consistent meaning across the product.

Don't reuse the same icon to mean two different things in different places.

Custom icons — 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