This page is the public reference for the current common SVG icon layer used in 3RK workflow visuals. The goal is not to show every possible symbol. It is to keep a small, reusable set that works well in checklists, workflows, summary cards, matrices, and AI-assist notes without turning diagrams into clutter.
Direct Answer
This icon reference is designed for article SVGs that need small, reusable signals rather than big decorative illustrations. The current set covers workflow state, ownership, review, devices, documents, and AI-assist cues so that new diagrams can stay consistent across articles.
The practical rule is simple: use semantic icon names such as owner, question, or aiAssist instead of thinking in raw file names. That makes diagrams easier to build, easier to update, and easier for both humans and AI systems to interpret later.
The current icon layer uses a neutral line-icon basis from Lucide and keeps the SVG output text-based and scalable in line with the general properties described by MDN’s SVG overview. Accessibility matters too, so inline SVG should keep meaningful labels and roles when the visual itself carries information, which matches the accessibility support described by the W3C SVG 2 accessibility appendix.
Evaluation Criteria
- Each icon should map to one clear meaning.
- The set should work across workflow, checklist, summary, and matrix visuals.
- Icons should remain readable at small sizes inside inline SVG.
- The naming should be stable enough that humans and AI agents can reference the same alias later.
Icon Alias Table
| Alias | Label | Group | Best use |
|---|---|---|---|
| question | Question | workflow-state | Use for unclear points, open questions, or a clarification step. |
| check | Approved | workflow-state | Use for approved items, finished checks, or confirmed review steps. |
| warning | Warning | workflow-state | Use for escalation, caution, or high-risk checkpoints. |
| owner | Owner | role | Use when one person owns the next step. |
| reviewer | Reviewer | role | Use for comment, review, or feedback stages. |
| approver | Approver | role | Use for formal sign-off or final decision points. |
| customer | Customer | role | Use when the external user or client matters in the flow. |
| mobile | Mobile | device-object | Use for mobile preview, phone-specific QA, or mobile-first context. |
| desktop | Desktop | device-object | Use for desktop view, dashboard work, or larger-screen context. |
| document | Document | device-object | Use for shared notes, files, docs, or formal written outputs. |
| aiAssist | AI Assist | ai-assist | Use where AI drafts, summarizes, or suggests options before review. |
| workflow | Workflow | ai-assist | Use to signal the process layer or multi-step system view. |
Usage Matrix
| Diagram type | Best icons | What they help show | Design note |
|---|---|---|---|
| Checklist | check / warning / question / owner | Review status, missing information, final owner | Keep icons small and pair them with short labels. |
| Workflow | workflow / owner / reviewer / approver / aiAssist | Show movement, ownership, review, and optional AI support | Do not let AI-assist icons replace the human-review gate. |
| Summary card | question / document / mobile / desktop | Clarify context, device, or document type quickly | Use only one or two icons per card. |
| Escalation or support map | warning / owner / customer / approver | Highlight risk, responsibility, and customer-facing impact | Reserve warning icons for real escalation signals. |
| Matrix or comparison | document / aiAssist / workflow / check | Add light semantic cues without overwhelming the matrix | Text still carries the main meaning. |
| AI-assist note | aiAssist / workflow / question | Show where AI helps versus where humans decide | Keep the AI icon secondary to the written guidance. |
Naming Rules
- Use semantic aliases such as
owner,warning, oraiAssistinstead of raw icon file names inside article logic. - Keep icons small and secondary to the text. The diagram should still make sense if the reader scans the words first.
- Do not use brand logos as substitutes for general meanings such as assistant, document, or workflow.
- When the icon meaning is not obvious on its own, pair it with a short label.
How To Use This Reference
Use this page when you need to decide which icon belongs in a workflow visual before editing the SVG. For example, if one step needs human accountability, choose owner or approver. If the step is optional AI help, choose aiAssist. If the flow needs a caution state, use warning instead of inventing a new marker.
FAQ
Why use semantic icon names instead of raw icon file names?
Semantic names such as owner, reviewer, or aiAssist keep the design system easier to maintain. The meaning stays stable even if the underlying icon source changes later.
Should every article SVG use icons?
No. Use them when they make a workflow, checklist, summary, or review state easier to scan. Avoid icons that add noise without clarifying the meaning.
What should be added next?
Calendar, email, meeting, blocked, nextStep, and summary would be useful additions because they would cover even more workflow and operations articles.
Bottom Line
A small icon set is more useful than a huge one when the purpose is repeatable workflow communication. If the team can recognize questions, owners, approvals, documents, devices, and AI-assist moments at a glance, diagrams stay cleaner and future SVG work gets easier to maintain.