Icons

01Overview

Remix Icon (@remixicon/react 4.9.0) is Nuton's only icon set (D1). Icons are drawn on a 24px grid, take their colour from currentColor and come in two styles: Line and Fill.

<RiBookOpenLine style={{ inlineSize: 'var(--nu-space-4)', blockSize: 'var(--nu-space-4)' }} aria-hidden="true" />
<RiBookOpenLine style={{ inlineSize: 'var(--nu-space-5)', blockSize: 'var(--nu-space-5)' }} aria-hidden="true" />
<RiBookOpenLine style={{ inlineSize: 'var(--nu-space-6)', blockSize: 'var(--nu-space-6)' }} aria-hidden="true" />
<RiBookOpenLine style={{ inlineSize: 'var(--nu-space-8)', blockSize: 'var(--nu-space-8)' }} aria-hidden="true" />

<RiBookOpenLine aria-hidden="true" /> // Line: the default
<RiBookOpenFill aria-hidden="true" /> // Fill: small status marks

• Line is the default. Buttons, inputs and menus in @nuton/ui use Line icons.
• Fill is for small status marks, where a solid shape reads better at a small size: the Field hint uses RiInformationFill and Avatar status badges use RiPushpinFill, RiStarFill and RiVerifiedBadgeFill. Guidance on Fill for selected or active states is still to be agreed with design.
• Icons are never bundled in @nuton/ui. Apps import the icons they need and pass them in through props such as leadingIcon or icon.

Common icons in Nuton

The icons @nuton/ui uses plus the verified Remix candidates from the Lucide inventory. Every name below is an export of @remixicon/react 4.9.0. For anything else, search the full set and check the export exists before you use it.

Licence

Migrating from Lucide

02Tokens

Generated from @nuton/tokens. Icon colours come from the Figma Mapped collection. Icon sizes have no tokens of their own; components use spacing tokens and type line heights.

Icon colours

Sizes used for icons

Icon sizes in components

Read from the component CSS in packages/ui. The 56px key icon is the only icon size without a token; it needs one when icon sizes get a Figma home.

03Usage

import { RiAddLine } from '@remixicon/react'
import { Button } from '@nuton/ui'

// Pass the icon to the component. It sizes, colours and hides the icon for you.
<Button leadingIcon={<RiAddLine />}>New lesson</Button>

CSS variables

.lesson-meta__icon {
  inline-size: var(--nu-space-5);
  block-size: var(--nu-space-5);
  color: var(--nu-icon-sub-600); /* Remix icons fill with currentColor */
}

Tailwind

Both Tailwind outputs expose the icon colours as colour utilities. Sizes aren't exposed as utilities; use the CSS variables.

/* app.css */
@import "tailwindcss";
@import "@nuton/tokens/tokens.css";
@import "@nuton/tokens/tailwind-v4-theme.css";

<RiTimerLine className="text-icon-sub-600" aria-hidden="true" />

// tailwind.config.js
module.exports = { presets: [require('@nuton/tokens/tailwind-v3-preset')] }

<RiTimerLine className="text-icon-sub-600" aria-hidden="true" />

Choosing a token

• --nu-icon-strong-950: icons that carry meaning on their own, and icons next to strong text.
• --nu-icon-sub-600: the default for icons next to secondary text, in inputs and in menus.
• --nu-icon-soft-400: decorative icons only, such as an empty input's search icon or a hint icon whose text carries the message. Below 3:1 on white, so never the only cue.
• --nu-icon-disabled-300: icons inside disabled controls.
• --nu-icon-white: icons on dark or saturated fills, such as a filled button.
• Inside a component, let the icon inherit currentColor. Set an icon token only for standalone icons.

04In use

Real @nuton/ui components. Each sizes and colours its icon from tokens, and hides it from assistive technology because the text names the control.

Buttons

<Button leadingIcon={<RiSparkling2Line />}>Generate quiz</Button>
<Button appearance="stroke" trailingIcon={<RiArrowRightLine />}>Next lesson</Button>
<Button iconOnly appearance="stroke" aria-label="Lesson settings"><RiSettings3Line /></Button>

Fields and inputs

<Field label="Find a lesson" hint="Search by title or topic.">
  <Input leadingIcon={<RiSearchLine />} placeholder="Photosynthesis" />
</Field>
<Field label="Space name" hint="Shown to everyone in the space." hintIcon={<RiInformationFill />}>
  <Input size="sm" defaultValue="Biology 101" />
</Field>

Key icons

<KeyIcon icon={<RiBookOpenLine />} />                       // decorative
<KeyIcon icon={<RiGraduationCapLine />} color="blue" appearance="lighter" />
<KeyIcon icon={<RiTimerLine />} size={48} label="Timed quiz" />  // meaningful: role="img"

Icon-only actions

<Button iconOnly size="sm" appearance="ghost" aria-label="Edit lesson"><RiEditLine /></Button>
<Button iconOnly size="sm" appearance="ghost" aria-label="Share lesson"><RiShareLine /></Button>
<Button iconOnly size="sm" appearance="ghost" aria-label="Download lesson"><RiDownload2Line /></Button>
<Button iconOnly size="sm" appearance="ghost" aria-label="More actions"><RiMore2Line /></Button>

05Accessibility

You must: hide decorative icons; name icon-only buttons and meaningful standalone icons; use Icon/Sub-600 or stronger for icons that carry meaning.

06Guidelines and related

Do and don't

Related

• ColourThe semantic colours behind the Icon tokens.
• SpacingThe scale components use to size icons.
• ButtonLeading, trailing and icon-only buttons.
• Inputs and fieldsInput icons and the hint icon.
• Chart legend and key iconIcons in a circle for emphasis.
• Dropdown and selectMenu item icons and check marks.