Iconography

Prelude utilizes Remix Icons for their clarity, modern aesthetic, and comprehensive coverage. All icons must follow these core design rules to maintain brand consistency:

• Style: Line variant for a clean, precise look.
• Base Grid: 24px x 24px.
• Scaling: Standard sizes are 16px (dense UI), 24px (standard), and 32px (headers).
• Color: Use brand primaries only — no custom icon colors outside the approved palette.

Icon Library Preview

pulse-line

computer-line

mind-map

settings-3-line

arrow-right-s-line

error-warning-line

shield-line

lock-line

search-line

eye-line

team-line

notification-3-line

download-line

filter-3-line

terminal-box-line

database-2-line

earth-line

flashlight-line

bar-chart-grouped-line

checkbox-circle-line

close-circle-line

time-line

cpu-line

loop-left-line

Technical Integration (React)

Prelude uses the @remixicon/react package to ensure icons are tree-shakable and fully typed.

1. Installation

Add the library to your repository using your preferred package manager:

# npm
npm install @remixicon/react

# yarn
yarn add @remixicon/react

# pnpm
pnpm add @remixicon/react

2. Usage in Components

Icons should be imported individually to keep the final bundle lightweight.

import { RiComputerLine, RiPulseLine, RiSettings3Line } from "@remixicon/react";

const DashboardSidebar = () => {
  return (
    <nav>
      {/* Default Usage */}
      <RiComputerLine size={24} color="#1A1A1A" />

      {/* Active State with Brand Accent */}
      <RiPulseLine size={24} color="#3B82F6" />

      <RiSettings3Line size={24} color="#707070" />
    </nav>
  );
};

3. Global Configuration (Optional)

For consistent styling across the entire app, you can wrap your root with a provider or create a wrapper component.

Resources

• Official Documentation: remixicon.com
• Icon Search: remixicon.com
• GitHub Repository: github.com/nicedoc/remixicon