Foundations6 of 7
Icons
Every icon set in use across A Rough Idea's apps, side by side, to choose a direction: the portfolio's three drafts, v2's own interface icons, the library most apps use, the sets apps draw themselves, the explorables' glyphs, and the apps' own icons.
Open the direction; see Choosing
Size of every set
The portfolio's three drafts
The portfolio's icon draft, all of it: three whole sets, drawn on October 17 for the portfolio's workroom. Each set draws the four lanes, the five themes and twenty kinds of source, plus a hatched mark for a kind with no icon yet: thirty icons on a 24-unit grid, in the current text color, so they follow light and dark.
Open which set: A Line, with B Solid for a selected item, is recommended
Each, left to right A Line · B Solid · C Tags
Lanes 4
Themes 5
Kinds of source 21
Set C's shapes say what kind of thing an icon names: a circle for a lane, a hexagon for a theme, a square for a kind of source. The workroom colors the five themes; here they are in ink, and in v2 those colors would come from the data layer's color-blind-safe set for categories.
v2's own interface icons
The icons v2 draws itself, for its frame: the mark, the light and dark button, presentation, full screen and home. The MCP serves the same six (they come from one file).
Lucide, as the apps use it
The open-source library (ISC license) most of the React and Next.js apps import, often through their component kits. Every icon any app imports is here.
Lucide 1.31.0: 124 icons across 9 apps, the most-used first. Hover a name for the apps that use it.
Sets the apps draw themselves
AI Research Platform · AppSvgIcon (navigation icons) 9
Own drawing on a 24 grid, stroke 1.8, default size 16. Used in Layout, NavAuthControls, pages/index, TagsAdminPage.
AI Research Platform · One-off inline icons 3
ai-research\components
Semantic Cartographer · Admin page header icon 1
Lucide/Feather "layers" pasted into the server-rendered admin page.
DDO demos · One-off inline icons 2
ddo-demos-vis-orgs\src\app\demos\permutation-distances
Speculative Journalism · OutletMiniGlyph (publication marks) 8
Eight abstract marks; each outlet name hashes to one (hash % 8). Each is animated with motion/react (drift, bob, spin, pulse); the SVGs here are the resting frame.
Virtual Colloquy of Mobiles · Line glyphs (landing cards, admin nav, study reports) 20
The Colloquy's own monochrome line glyphs on a 24 grid. On the landing page the stroke comes from CSS (.card-icon svg: fill none, stroke currentColor, stroke-width 1.6, round caps and joins, 26px), added here as attributes. accounts/index.html repeats several in its side nav at stroke-width 1.8; sim-studies/report.js draws four more "in the landing page's manner".
Virtual Colloquy of Mobiles · Scene Studio node-tree icons (Lucide/Feather paths) 11
The file says: "Icons are inline SVG paths from the Lucide icon set (MIT licence)" — older Feather-era geometry (settings, eye, zap, sun, link, package, globe, copy, plus, trash-2).
Virtual Colloquy of Mobiles · Other one-off icons 3
Virtual-Colloquy-of-Mobiles
ChatPlantUML · Inline SVG icons (Heroicons v1 outline paths) 28
Pasted per component, no icon package; the d-strings are Heroicons v1 (24px outline, stroke-width 2). Spinners are Tailwind's docs spinner.
Relatio · CustomIcons (map-view icons) 2
Two hand-drawn icons beside its Lucide set, for map views Lucide has no glyph for. Props size=24, color=currentColor.
OpticEvade · Map marker 1
Lucide "cctv" paths in red, base64-encoded into a Leaflet marker icon for surveillance cameras.
Agent Design Studio · AgenticComponentIcon (flow-component marks) 10
The marks a flow component declares (ICON_IDS), 16 grid, stroke 1.25, chosen to differ in silhouette at 9-16px. Unknown ids get a plain square.
Agent Design Studio · One-off inline icons 18
Drawn per component. The four system-instruction buttons animate a dashed stroke at rest and go solid on hover; the solid form is recorded.
autoresearch demo · Inline icons in chat.py's page 1
The chart key (kept, best so far, on show, off the scale) is drawn there too but is a legend, not an icon.
Letterly · ui/icons.tsx 22
Twenty-one icon components; all but DiagramIcon are Lucide paths copied by hand (older Lucide versions), the package is not a dependency.
MDES Exhibition Planner · Tagline workspace inline icons 3
The 32px wave beside "Project Tagline Generator" is a header mark and is left out.
OpenRouter registry · Inline icons 5
RegistryIcon (the nav-bar mark) is byte-identical to the favicon and is left out.
Other icon libraries
| Library | Apps | Icons |
|---|---|---|
| Unicode glyphs as icons | AI Research Platform, Semantic Cartographer, DDO demos, Speculative Journalism, Virtual Colloquy of Mobiles, ChatPlantUML, Relatio, Design System MCP demo, LLM Explorables, Agent Design Studio, Letterly, Timetables, MDES Exhibition Planner, Platform shell, OpenRouter registry | ✓ done / correct, ✗ error / wrong, ○ pending, ◉ running, × close / remove, ✕ close (modals), ▲ collapse, ▼ expand, ↕ sortable column, ↗ go to website, ↺ refresh, ▶ new run, ⚙ running / settings, ⇄ flip source and target, ● status dot (system diagram key), ⚠ warning, ↻ refresh (admin), ● job status dot (admin), → workflow arrow (admin), ↗ open in new tab (admin), ▼ / ▲ collapse toggle, ▶ collapsed section, → arrow icon (interpretations), ← home (back button), ✓ / ✗ check passed / failed (admin), ✔ / ✖ URL reachable / not (admin), ◼ done / stream closed (sweep log), ▶ starting sweep (log), ▼ disclosure (rotates when open), ▸ disclosure (rotates when open), ▾ details summary, ▲ expanded stage, ★ auto edition, ⌖ sorted from location, ⚡ fast path (eval diagram), ⚠ warning (log), ← / → previous / next page (admin), ✕ remove / delete, ▾ dropdown / open disclosure, ▸ closed disclosure (also CSS ::before in demo/styles.css), ☀ light theme (theme toggle), ▶ play, ■ stop, ❚❚ pause, ◀◀ reverse, ⏮ restart, ▲ / ▼ move up / down, sort ascending / descending, ✓ / ✗ boolean true / false, ⇅ sortable column, ● status dot, ▤ document (guide heading), ← back (All docs), ∗ access grant, ← back to the app (admin), ↑ / ↓ sort direction, ▶ run test / collapsed toggle, ✓ pass, ✗ fail, ! error, ⏳ running / calling, ⚠ warning / reset to defaults, ⬇ download / export design system, ⬆ import design system / drop zone, ✶ generate from website, ⬡ view schema / coming soon, ✦ empty preview, ◇ empty preview, ◈ gallery sample, ✨ generated design system, ⚙ agent settings, ⏹ stop, ▼ / ▶ group collapse chevron, ▾ / ▸ toggle, ↳ cached / cache write, ↺ loop (diagram), ↓ flow arrow (diagram), ← back to the demo, × remove step, ‹ › pagination, ↗ external link, see explorablesGlyphs, ✕ close, ⓘ node info, ▸ disclosure (run log, panels), ⚠ generated-page warning, × remove, ↑ / ↓ move up / down, ✎ edit, ✓ check / added, ✦ generate / avatar fallback, ⚙ settings, ◀ / ▶ previous / next session, ⛶ fullscreen, ‹ back to the flow gallery, × close, ✓ / ✗ pass / fail, ↺ reset, ▼ / ▲ / ▶ expand chevrons, → chain arrow, ↗ external link (CSS ::after, AgentModelSettings.module.css), › details summary marker (CSS ::before, LetterApp.module.css), × close panel, ↗ preview / external link, ↶ undo, ↷ redo, ◉ public, ○ private, ◧ toggle outline (left panel), ◨ toggle tools (right panel), ▤ document settings, □ calendar, ↔ crossover (outline), ◆ milestone (outline), ⬇ export SVG, ▼ / ▶ collapse, ↗ open standalone, → enter (ENTER THE COLLOQUY →), ← back links, → next / browse, ▶ collapsed (rotates 90° open), ✓ / ✗ connected / failed, ↓ scroll to bottom, ↻ sync, ‹ / › previous / next chat, ⇅ / ↑ / ↓ sort |
| Emoji as icons | AI Research Platform, DDO demos, Virtual Colloquy of Mobiles, ChatPlantUML, Design System MCP demo, Agent Design Studio, OpenRouter registry | 📋 submission log, 🟢 successes, 🔴 failures, ⬇️ download failed prompts, 🧠 start label run, ⏳ pending, 🎲 generate random, 🌙 dark theme (theme toggle), 👍 good answer, 👎 poor answer, ✅ allowed, ❌ no access, ⚪ works but nothing saved, 💡 flash mode, 🔊 sound mode, 📚 cited source, 👁 show password, 👍 helpful (admin), 👎 not helpful (admin), 📋 Test Suite, 🔍 Test Inspector, 📦 Batch, 🔧 Tool Explorer, 💬 Prompt Lab, 🔗 Playground, 🤖 Agents, 📊 Metrics, 🟢 user input (diagram key), 🟡 request packet (diagram key), 🔵 LLM processing (diagram key), 📷 scan with camera, 🪪 agent card, 🗑 delete chat, 🔑 Clients, 📊 Usage, 🗂 Model Registry, 🔍 Model Resolution, 🔌 MCP Protocol, 💬 Registry Chat |
| @mui/icons-material ^7.1.0 | Semantic Cartographer | HelpOutline, ExpandMore, InfoOutlined, ViewInAr, Link, AdminPanelSettings, Search, Menu, List |
| Material Symbols Outlined (Google Fonts, loaded at runtime by src/app/page.tsx) | DDO demos | scatter_plot, grid_4x4, view_in_ar, photo_size_select_actual, donut_large, pan_tool_alt, 3d_rotation, texture, route, hexagon, show_chart, mist |
| @mui/icons-material ^7.1.1 (declared in package.json, never imported) | DDO demos | |
| Heroicons v1 outline (24px paths pasted inline as SVG; no package) | ChatPlantUML | clipboard, paper-airplane, lightning-bolt, cog, sun, moon, share, code, clock, cursor-click, exclamation, photograph, download, thumb-up, thumb-down, check, x, plus, arrow-narrow-right, sparkles, chevron-down, refresh, exclamation-circle |
| Material Symbols Outlined (Google Fonts link in public/SemanticScout.html) | Semantic Scout | light_mode, dark_mode |
| VitePress 1.6.4 default-theme icons (vpi-* CSS masks, Lucide-derived; which ones show depends on the page) | Workshops, Prototyping Toolkit | align-left, arrow-down, arrow-left, arrow-right, arrow-up, chevron-down, chevron-left, chevron-right, chevron-up, corner-down-left, delete, heart, languages, layout-list, moon, more-horizontal, plus, search, square-pen, sun |
| Material Symbols (Google, Apache 2.0) — one glyph inlined as SVG, no font | LLM Explorables | info (rag/src/initUI.js INFO_ICON) |
| @mui/icons-material ^7.3.7 | TimeTwin | GitHub |
| Material Symbols Outlined (Google Fonts link in index.html, icon_names=volume_off,volume_up) | Orbital Chronos | volume_up, volume_off |
| @heroicons/react ^2.2.0 | DFN Teams | 24/outline: ChartBarIcon, BeakerIcon, CloudArrowUpIcon, UserIcon, TableCellsIcon, ArrowsUpDownIcon, RectangleGroupIcon, Square3Stack3DIcon, ArrowDownTrayIcon, ChevronUpIcon, ChevronDownIcon, 24/solid: BookOpenIcon, ChatBubbleBottomCenterTextIcon, DocumentTextIcon, PresentationChartBarIcon, FilmIcon, UserGroupIcon, VideoCameraIcon, SpeakerWaveIcon, WrenchScrewdriverIcon, ArrowDownTrayIcon |
| Heroicons v1 outline (paths pasted inline) | MDES Exhibition Planner | beaker, exclamation-circle |
The explorables' glyphs
LLM Explorables uses text characters as icons, and draws two of its own.
‹
›
←
→
+
−
▲
▼
▸
▾
↻
↑ ↓
✓
◌
␣
_
⌂
◐
↗
undefined
The apps' own icons
Each app's favicon and icon. These stay with their apps (decided with the mark); they are here for the family resemblance, and as what an icon set should sit beside.
Choosing
What the survey found: nine apps already use Lucide (124 different icons), and several sets that look custom are copies of it or of Heroicons, pasted in by hand. The sets the apps truly draw themselves name their own content (the Colloquy's glyphs, Speculative Journalism's outlet marks, Agent Studio's flow marks) rather than interface actions. The portfolio's drafts draw A Rough Idea's own concepts, which no library has.
| Job | Recommended | Why |
|---|---|---|
| Interface actions: close, menus, download, copy, arrows | Lucide, one library for every app | Already the most used; open license; its plain line drawing suits Margin; the hand-copied sets become one package. |
| A Rough Idea's own concepts: lanes, themes, kinds of source | The portfolio draft's A Line, with B Solid for a selected item | No library draws these; redrawn at Lucide's line weight so the two sit together. |
| Marks that are an app's content | Stay with their apps | Like the apps' own icons: the Colloquy's glyphs, Speculative Journalism's outlets, Agent Studio's flow marks. |
| Signals inside text | Stay as text: → ▾ ↗ | They are the guide's small marks for what happens next; other glyphs used as buttons give way to icons as each app is aligned. |
Recommended the four rows aboveOpen TJ's choice
One weight for every line icon would follow: a role for the stroke, so it changes in one place like everything else. Set C (Tags) stays available for compact labels in dense tables.