Icons · 27 marks

27 icons. 24px grid. 1.5px stroke.

The web kit ships a custom React icon set. On Mac, prefer SF Symbols where a clean match exists — you get multi-weight, hierarchical, and palette rendering for free. The 3 custom marks below must be bundled as SwiftUI Shapes or template PDFs.
01 · Sizes

Five sanctioned sizes.

Use these exact sizes — do not interpolate. 14pt in chips and badges, 16pt in toolbars, 18pt in side-list rows, 20pt in buttons, 24pt in headers.

14pt
16pt
18pt
20pt
24pt
32pt
40pt
02 · Gallery · Mac mapping

Use SF Symbol first. Fall back to custom.

The SF column gives the canonical symbol name for a SwiftUI Image(systemName:). When the column reads custom, the icon must be provided as a Shape or bundled PDF — the shape is meaningful to Dagrun and not substitutable.

iconnamesf symbolswiftui
Route
Icons.Route
custom
Custom — no clean SF equivalent
IconDagrun.route.view(size: 18)
Model
Icons.Model
custom
Custom — draw the 4-node glyph
IconDagrun.model.view(size: 18)
Tool
Icons.Tool
wrench.and.screwdriver
Use SF — multi-weight, hierarchical, free
Image(systemName: "wrench.and.screwdriver") .symbolRenderingMode(.hierarchical)
Terminal
Icons.Terminal
terminal
Use SF — multi-weight, hierarchical, free
Image(systemName: "terminal") .symbolRenderingMode(.hierarchical)
Local
Icons.Local
custom
Custom — on-device chip
IconDagrun.local.view(size: 18)
Cloud
Icons.Cloud
cloud
Use SF — multi-weight, hierarchical, free
Image(systemName: "cloud") .symbolRenderingMode(.hierarchical)
Play
Icons.Play
play.fill
Use SF — multi-weight, hierarchical, free
Image(systemName: "play.fill") .symbolRenderingMode(.hierarchical)
Pause
Icons.Pause
pause.fill
Use SF — multi-weight, hierarchical, free
Image(systemName: "pause.fill") .symbolRenderingMode(.hierarchical)
Stop
Icons.Stop
stop.fill
Use SF — multi-weight, hierarchical, free
Image(systemName: "stop.fill") .symbolRenderingMode(.hierarchical)
Arrow
Icons.Arrow
arrow.right
Use SF — multi-weight, hierarchical, free
Image(systemName: "arrow.right") .symbolRenderingMode(.hierarchical)
Check
Icons.Check
checkmark
Use SF — multi-weight, hierarchical, free
Image(systemName: "checkmark") .symbolRenderingMode(.hierarchical)
X
Icons.X
xmark
Use SF — multi-weight, hierarchical, free
Image(systemName: "xmark") .symbolRenderingMode(.hierarchical)
Search
Icons.Search
magnifyingglass
Use SF — multi-weight, hierarchical, free
Image(systemName: "magnifyingglass") .symbolRenderingMode(.hierarchical)
Settings
Icons.Settings
gearshape
Use SF — multi-weight, hierarchical, free
Image(systemName: "gearshape") .symbolRenderingMode(.hierarchical)
User
Icons.User
person.circle
Use SF — multi-weight, hierarchical, free
Image(systemName: "person.circle") .symbolRenderingMode(.hierarchical)
Folder
Icons.Folder
folder
Use SF — multi-weight, hierarchical, free
Image(systemName: "folder") .symbolRenderingMode(.hierarchical)
File
Icons.File
doc
Use SF — multi-weight, hierarchical, free
Image(systemName: "doc") .symbolRenderingMode(.hierarchical)
Git
Icons.Git
point.3.connected.trianglepath.dotted
Use SF — multi-weight, hierarchical, free
Image(systemName: "point.3.connected.trianglepath.dotted") .symbolRenderingMode(.hierarchical)
Bolt
Icons.Bolt
bolt.fill
Use SF — multi-weight, hierarchical, free
Image(systemName: "bolt.fill") .symbolRenderingMode(.hierarchical)
Shield
Icons.Shield
shield
Use SF — multi-weight, hierarchical, free
Image(systemName: "shield") .symbolRenderingMode(.hierarchical)
Menu
Icons.Menu
line.3.horizontal
Use SF — multi-weight, hierarchical, free
Image(systemName: "line.3.horizontal") .symbolRenderingMode(.hierarchical)
Chevron
Icons.Chevron
chevron.right
Use SF — multi-weight, hierarchical, free
Image(systemName: "chevron.right") .symbolRenderingMode(.hierarchical)
Plus
Icons.Plus
plus
Use SF — multi-weight, hierarchical, free
Image(systemName: "plus") .symbolRenderingMode(.hierarchical)
Command
Icons.Command
command
Use SF — multi-weight, hierarchical, free
Image(systemName: "command") .symbolRenderingMode(.hierarchical)
Sparkle
Icons.Sparkle
sparkles
Use SF — multi-weight, hierarchical, free
Image(systemName: "sparkles") .symbolRenderingMode(.hierarchical)
Globe
Icons.Globe
globe
Use SF — multi-weight, hierarchical, free
Image(systemName: "globe") .symbolRenderingMode(.hierarchical)
Download
Icons.Download
arrow.down.to.line
Use SF — multi-weight, hierarchical, free
Image(systemName: "arrow.down.to.line") .symbolRenderingMode(.hierarchical)
03 · SwiftUI wrapper

One call site for both paths.

Hide the SF-vs-custom detail behind a single enum so the app code never knows (or cares). Adopting a new icon later only touches IconDagrun.swift.

swiftui
// Sources/AgentOSApp/DesignSystem/IconDagrun.swift
import SwiftUI

enum IconDagrun: String, CaseIterable {
    case route, model, tool, terminal, local, cloud
    case play, pause, stop, arrow, check, x
    case search, settings, user, folder, file
    case git, bolt, shield, menu, chevron, plus
    case command, sparkle, globe, download

    @ViewBuilder
    func view(size: CGFloat = 18, weight: Font.Weight = .medium) -> some View {
        if let sf = sfSymbol {
            Image(systemName: sf)
                .font(.system(size: size, weight: weight))
                .symbolRenderingMode(.hierarchical)
                .frame(width: size, height: size)
        } else {
            customShape
                .frame(width: size, height: size)
        }
    }

    private var sfSymbol: String? {
        switch self {
        case .tool:      return "wrench.and.screwdriver"
        case .terminal:  return "terminal"
        case .cloud:     return "cloud"
        case .play:      return "play.fill"
        case .pause:     return "pause.fill"
        case .stop:      return "stop.fill"
        case .arrow:     return "arrow.right"
        case .check:     return "checkmark"
        case .x:         return "xmark"
        case .search:    return "magnifyingglass"
        case .settings:  return "gearshape"
        case .user:      return "person.circle"
        case .folder:    return "folder"
        case .file:      return "doc"
        case .git:       return "point.3.connected.trianglepath.dotted"
        case .bolt:      return "bolt.fill"
        case .shield:    return "shield"
        case .menu:      return "line.3.horizontal"
        case .chevron:   return "chevron.right"
        case .plus:      return "plus"
        case .command:   return "command"
        case .sparkle:   return "sparkles"
        case .globe:     return "globe"
        case .download:  return "arrow.down.to.line"
        case .route, .model, .local:
            return nil // custom
        }
    }

    @ViewBuilder
    private var customShape: some View {
        switch self {
        case .route:  RouteShape()
        case .model:  ModelShape()
        case .local:  LocalShape()
        default:      EmptyView()
        }
    }
}

// Usage everywhere in the app:
IconDagrun.route.view(size: 18)
IconDagrun.bolt.view(size: 14, weight: .semibold)
04 · SVG reference

Exact geometry for the custom shapes.

Copy the <path d="…"> data from the SVG on this page into a SwiftUI Path. The coordinates are already in a 24-unit viewBox — scale by size/24.

Route
Right-click → View frame source → grab the <svg>
Model
Right-click → View frame source → grab the <svg>
Local
Right-click → View frame source → grab the <svg>