161 icons drawn on a 24-pixel grid with the logo’s square motif.
One stroke weight, square caps and mitred joins, so every icon looks cut from the same sheet as the logo.
4 parts
One component for all 161 icons: a 24-pixel grid, a 1.5 stroke, square ends, coloured by the text around it.
import { Icon, iconMeta, type IconName } from '@rchursin/product/icons/Icon'import { Link } from '@rchursin/product/lib/router'
/** * One drawing, scaled. The 1.5 stroke on the 24 grid paints 1px at 16, 1.25 at 20, 1.5 at 24 * and 2 at 32. Size comes from a size-* class (or the size prop); colour from the text colour. */const names: IconName[] = ['calendar', 'agent', 'session', 'status-progress', 'priority-high']
const sizes = [ { px: 16, className: 'size-4', stroke: '1' }, { px: 20, className: 'size-5', stroke: '1.25' }, { px: 24, className: 'size-6', stroke: '1.5' }, { px: 32, className: 'size-8', stroke: '2' },]
export default function IconSizes() { return ( <div className="flex w-full max-w-md flex-col gap-6"> <ul className="flex flex-col divide-y divide-line border-y border-line">Search all 161 icons by name or use, check them at 16 to 24 pixels, and copy one as SVG, JSX or its name.
import { IconGallery } from '@rchursin/product/iconset'
/** * The whole browser: search by name or use, filter by category, preview at 16, 20 or 24 on * either ground, then pick an icon to copy it. Press / to search, arrows to move in the grid. * The preview size and ground are remembered in this browser. On a page of its own, drop the * scrolling box: the gallery is meant to run full height with the page. */export default function IconGalleryExample() { return ( <div className="rc-scroll max-h-[min(50rem,85dvh)] overflow-y-auto p-4 sm:p-6"> <IconGallery /> </div> )}How the icons are built, how status and priority are drawn, how to use icons, and how the set ships, as live sections.
import { Construction } from '@rchursin/product/iconset'
/** * How the set is built, drawn to scale from the generator's own numbers: the grid, square * caps, mitre corners, the 0.75 + 1.5k pixel rule (rasterised by your browser) and the two * motifs borrowed from the logo. */export default function IconConstruction() { return ( <div className="w-full min-w-0"> <Construction /> </div> )}Fifteen small round-capped icons used by the library-style screens, each its own component.
import type { ComponentType, SVGProps } from 'react'import { ActivityIcon, ArrowRightIcon, BellIcon, ChevronDownIcon, ChevronRightIcon, ChevronsUpDownIcon, ChevronUpIcon, FolderIcon, HomeIcon, LoaderIcon, LockIcon, MenuIcon, PanelLeftIcon, SearchIcon, SlidersIcon,} from '@rchursin/components/icons'
/**Press Down arrow to move to the results, Enter to open the first one, Escape to clear.
161 icons
| Icon size | 1.5 stroke (ours) | 2.0 stroke | At 1× |
|---|---|---|---|
| 16 px | 1.00 px · whole pixel | 1.33 px | |
| 20 px | 1.25 px | 1.67 px | |
| 24 px | 1.50 px | 2.00 px | |
| 32 px | 2.00 px | 2.67 px |