Icons

Icons add visual cues to actions, navigation, and metrics. Aggarly Platform is icon-library agnostic: you can use lucide-react, Remix Icon, or a custom set, as long as the style is consistent.

Using lucide-react

We recommend lucide-react for a clean, modern outline icon set that works well in dashboard interfaces.

import { User, Activity, AlertTriangle } from "lucide-react";

export function Example() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <User size={18} />
      <Activity size={18} />
      <AlertTriangle size={18} />
    </div>
  );
}

Inline icons

For simple UIs or quick prototypes, you can use emoji inline with button labels.

<button className="button button--ghost">
  <span style={{ marginRight: 6 }}>🧠</span>
  Cognitive goals
</button>

Icons

Icons add visual cues to actions, navigation, and metrics. Aggarly Platform is icon-library agnostic: you can use lucide-react, Remix Icon, or a custom set, as long as the style is consistent.

Using lucide-react

We recommend lucide-react for a clean, modern outline icon set that works well in dashboard interfaces.

import { User, Activity, AlertTriangle } from "lucide-react";

export function Example() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <User size={18} />
      <Activity size={18} />
      <AlertTriangle size={18} />
    </div>
  );
}

Inline icons

For simple UIs or quick prototypes, you can use emoji inline with button labels.

<button className="button button--ghost">
  <span style={{ marginRight: 6 }}>🧠</span>
  Cognitive goals
</button>