Halyard

Precise line and two-tone icons on a single 24px grid, with ink, accent and stroke width exposed as Framer variables.

01 — VARIABLES

Same icons. Your colours, your weight.

Every row below is the same five Halyard icons placed as separate instances, with Ink, Accent and Stroke width set per instance. No duplicated artwork.

Default

#17171C · #FF6A3D · stroke 1.5

Harbor

#0B2545 · #3DA5FF · stroke 1.5

Moss

#1F3D2B · #6CCB7E · stroke 1.5

Plum

#3B1F4A · #C77DFF · stroke 1.5

Hairline

#17171C · #FF6A3D · stroke 1

Bold, inverted

#F4F4F0 · #FF6A3D · stroke 2

02 — CATEGORIES

Organised by what you build.

A cross-section of the set, grouped by use. Line and two-tone versions share names, so swapping style is one change.

AI & agents

line

Commerce & money

two-tone

Interface

line

Code & data

two-tone

Care & local

line

Media & messages

two-tone

03 — IN PLACE

Made for real interfaces.

Navigation, cards, lists and buttons from a sample app screen, all drawn with Halyard instances. Active states use the accent variable.

Workspace

Home

Overview

Inbox

Schedule

Team

Documents

Settings

Overview

Bookings

Payments

Messages

Schedule a follow-up

Send the receipt

Review access

Create

Export

04 — THE FULL SET

Every icon, all 392.

196 line and 196 two-tone icons, each placed here as a live instance.

Halyard

by PixelSunset