Trevarn — Icon System

Purpose

Define a single, authoritative icon system for Difenn that supports workflow-first, operational clarity while avoiding decorative or framework-driven icon drift.

System Objectives

Aligned with Trevarn's Vera Molnar-inspired, systematic brand language
Supports workflow-first, operational clarity
Avoids decorative or framework-driven icon drift
Scales cleanly as new workflows and tools are added

This icon system must feel:

Calm · Intentional · Technical · Trustworthy

Core Principles (Non-Negotiable)

1. One Icon Family, Always

Single icon family (outline or stroke-based). Consistent stroke weight, corner geometry, and optical size. No mixing of filled vs outline styles.

Icons must feel designed as a system, not collected.

2. Shape Carries Meaning, Not Colour

Icon glyph = meaning. Colour = context or state. Icons must remain fully legible in monochrome.

Never encode meaning using: Colour, opacity tricks, gradients, or decorative fills.

3. Monochrome by Default

Icons are never multicolour. Default colour inheritance: currentColor only. Colour applied by container or state, never hard-coded.

This ensures brand discipline, dark mode compatibility, and role-based colour escalation without redesign.

Global SVG Rules

All icons must obey these specifications. No exceptions.

Mandatory SVG Attributes

stroke="currentColor"
fill="none"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
viewBox="0 0 24 24"
        

This guarantees:

Dark mode compatibility
Context-driven colour inheritance
Brand discipline across all touchpoints
Optical weight tuned for UI (not illustration)

Colour Usage Rules

Icons may only change colour based on context or state, never category. Icons must never choose colours themselves.

Default / Neutral

--trevarn-ink

Overview / Workflows

--trevarn-glaz

Admin / Advanced

--trevarn-violet

Primary / Recommended

--trevarn-balan

Disabled / Read-only

--trevarn-mist

Canonical Icon Library

Icons are assigned at the workflow category level, not per workflow. This guarantees scalability without visual noise. Tap any icon to cycle through colour contexts.

Device Management

Configure, replace, repair physical devices

Device / Chip

device-chip

Replace / Swap

device-swap

Health Monitoring

Interpret system state and wellbeing

Health / Heart

health-heart

Pulse / Waveform

health-pulse

Support / Escalation

Handoff, escalation, intervention

Escalate / Handoff

support-escalate

Support / Lifebuoy

support-lifebuoy

Deployment

Prepare, validate, bulk operations

Box / Package

deploy-box

Checklist / Validation

deploy-checklist

Discovery

Raw visibility, scanning, inspection

Radar / Scan

discovery-radar

Magnifier / Inspect

discovery-search

Job Forensics

Timeline, causality, audit

Timeline

forensics-timeline

Clock / Time

forensics-clock

Configuration (Advanced)

Low-level, expert changes

Sliders / Parameters

config-sliders

Gear / Expert

config-gear

Users & Authentication

Accounts, teams, access control

User

user

Users / Team

users

Lock

lock

Unlock

unlock

Key

key

Shield

shield

Log Out

logout

Actions

Create, edit, delete, transfer

Plus / Add

plus

Edit / Pencil

edit

Trash / Delete

trash

Copy

copy

Download

download

Upload

upload

Refresh / Sync

refresh

Link

link

External Link

external-link

Star / Favourite

star

Bookmark

bookmark

Communication

Notifications, messages, alerts

Bell / Notification

bell

Mail / Email

mail

Message / Chat

message

Phone

phone

Calendar

calendar

Navigation

Menus, direction, wayfinding

Home

home

Menu / Hamburger

Close / X

More / Ellipsis

more-horizontal

More Vertical

more-vertical

Chevron Down

chevron-down

Chevron Up

chevron-up

Chevron Right

chevron-right

Chevron Left

chevron-left

Arrow Up

arrow-up

Arrow Down

arrow-down

Arrow Left

arrow-left

Arrow Right

arrow-right

Status & Feedback

Success, error, warning, info states

Check / Success

check

Check Circle

check-circle

X Circle / Error

x-circle

Alert / Warning

alert-triangle

Info

info

Help / Question

help-circle

Alert Circle

alert-circle

Minus

minus

Data & Files

Documents, storage, infrastructure

File / Document

file

File Text

file-text

Folder

folder

Database

database

Server

server

Cloud

cloud

Inbox

inbox

View & Layout

Display modes, visibility, organisation

Grid

grid

List

list

Eye / View

eye

Eye Off / Hide

eye-off

Filter

filter

Expand / Maximise

expand

Collapse / Minimise

collapse

Sidebar

sidebar

Layout

layout

Analytics & Reporting

Charts, trends, data visualisation

Bar Chart

chart-bar

Line Chart / Activity

chart-line

Pie Chart

chart-pie

Trending Up

trending-up

Trending Down

trending-down

Clock / History

history

Globe / World

globe

Location / Pin

map-pin

Connectivity

Network, signal, power states

Wifi

wifi

Wifi Off

wifi-off

Battery

battery

Battery Low

battery-low

Power

power

Zap / Lightning

zap

Smartphone

smartphone

Monitor / Desktop

monitor

Usage Rules in Difenn UI

Context	Rules
Workflow Cards	Icon appears top-left or leading Icon size consistent across all cards Icon colour inherited from section context No decorative backgrounds behind icons
Navigation (TopBar / LeftRail)	Icons optional, text-first If used, icons are neutral, secondary, never dominant over labels
Admin Areas	Icons inherit Violet context automatically No special admin icon styles

Explicit Anti-Patterns (Never Allowed)

Multicolour icons

Category colour-coding

Framework default icon packs without restyling

Emojis or illustrative icons

Soft pastel fills

Filled icons mixed with outline icons

Decorative icon backgrounds

The Test

If an icon draws attention to itself, it is wrong.

Canonical SVG Sprite

This file should be loaded once at app bootstrap and referenced via <use>.

trevarn-icons.svg

Copy this sprite file to /src/assets/icons/trevarn-icons.svg and treat as authoritative.

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">

  <!-- DEVICE MANAGEMENT -->

  <symbol id="device-chip" viewBox="0 0 24 24">
    <rect x="6" y="6" width="12" height="12" rx="2"/>
    <path d="M9 1v4M15 1v4M9 19v4M15 19v4M1 9h4M1 15h4M19 9h4M19 15h4"/>
  </symbol>

  <symbol id="device-swap" viewBox="0 0 24 24">
    <path d="M3 7h13l-3-3"/>
    <path d="M21 17H8l3 3"/>
  </symbol>

  <!-- HEALTH MONITORING -->

  <symbol id="health-heart" viewBox="0 0 24 24">
    <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.6 8.8-8.6a5.5 5.5 0 0 0 0-7.8z"/>
  </symbol>

  <symbol id="health-pulse" viewBox="0 0 24 24">
    <path d="M3 12h4l2-5 4 10 2-5h4"/>
  </symbol>

  <!-- SUPPORT / ESCALATION -->

  <symbol id="support-escalate" viewBox="0 0 24 24">
    <path d="M7 17l10-10"/>
    <path d="M10 7h7v7"/>
  </symbol>

  <symbol id="support-lifebuoy" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="9"/>
    <circle cx="12" cy="12" r="3"/>
    <path d="M12 3v6M12 15v6M3 12h6M15 12h6"/>
  </symbol>

  <!-- DEPLOYMENT -->

  <symbol id="deploy-box" viewBox="0 0 24 24">
    <path d="M12 2l9 5-9 5-9-5 9-5z"/>
    <path d="M3 7v10l9 5 9-5V7"/>
  </symbol>

  <symbol id="deploy-checklist" viewBox="0 0 24 24">
    <path d="M4 6h12"/>
    <path d="M4 12h12"/>
    <path d="M4 18h12"/>
    <path d="M18 6l2 2 4-4"/>
  </symbol>

  <!-- DISCOVERY -->

  <symbol id="discovery-radar" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="9"/>
    <path d="M12 12l6-6"/>
    <path d="M12 3v9"/>
  </symbol>

  <symbol id="discovery-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="7"/>
    <path d="M21 21l-4.3-4.3"/>
  </symbol>

  <!-- JOB FORENSICS -->

  <symbol id="forensics-timeline" viewBox="0 0 24 24">
    <path d="M4 6h16"/>
    <path d="M4 12h16"/>
    <path d="M4 18h16"/>
    <circle cx="8" cy="6" r="1"/>
    <circle cx="14" cy="12" r="1"/>
    <circle cx="10" cy="18" r="1"/>
  </symbol>

  <symbol id="forensics-clock" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="9"/>
    <path d="M12 7v5l3 3"/>
  </symbol>

  <!-- CONFIGURATION (ADVANCED) -->

  <symbol id="config-sliders" viewBox="0 0 24 24">
    <path d="M4 21v-7M4 10V3"/>
    <circle cx="4" cy="14" r="2"/>
    <path d="M12 21v-9M12 8V3"/>
    <circle cx="12" cy="11" r="2"/>
    <path d="M20 21v-5M20 14V3"/>
    <circle cx="20" cy="16" r="2"/>
  </symbol>

  <symbol id="config-gear" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="3"/>
    <path d="M19.4 15a1.6 1.6 0 0 0 .3 1.7l.1.1-2 3.4-.1-.1a1.6 1.6 0 0 0-1.8-.7l-.2.1-1.2 2.3h-4l-1.2-2.3-.2-.1a1.6 1.6 0 0 0-1.8.7l-.1.1-2-3.4.1-.1a1.6 1.6 0 0 0 .3-1.7l-.1-.2-2.3-1.2v-4l2.3-1.2.1-.2a1.6 1.6 0 0 0-.3-1.7l-.1-.1 2-3.4.1.1a1.6 1.6 0 0 0 1.8.7l.2-.1 1.2-2.3h4l1.2 2.3.2.1a1.6 1.6 0 0 0 1.8-.7l.1-.1 2 3.4-.1.1a1.6 1.6 0 0 0-.3 1.7l.1.2 2.3 1.2v4l-2.3 1.2z"/>
  </symbol>

</svg>
            

Vue Icon Component

This component enforces discipline: no colours inside icons, no random sizing, no icon misuse.

Icon.vue

Save to /src/components/ui/Icon.vue

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  name: string
  size?: number | string
  title?: string
}>()

const sizePx = computed(() =>
  typeof props.size === 'number' ? `${props.size}px` : props.size ?? '20px'
)
</script>

<template>
  <svg
    :width="sizePx"
    :height="sizePx"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.75"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
    class="trevarn-icon"
  >
    <title v-if="title">{{ title }}</title>
    <use :href="`#${name}`" />
  </svg>
</template>

<style scoped>
.trevarn-icon {
  display: inline-block;
  vertical-align: middle;
}
</style>
        

Usage Examples

// Workflow Card
<Icon name="device-chip" class="text-trevarn-glaz-500" />

// Admin Tool
<Icon name="config-gear" class="text-trevarn-violet-500" />

// Recommended Action
<Icon name="support-escalate" class="text-trevarn-balan-500" />

// Disabled / Read-only
<Icon name="health-heart" class="text-ui-text-secondary" />
        

How to Extend Safely

New Icon Acceptance Criteria

When adding a new icon, all must pass:

Works in black only
Recognisable at 16px
Matches stroke rhythm of existing set
Uses no fills
Meaning comes from shape, not decoration

If it fails one criterion, reject it.

Locked Icon System

Trevarn icons are SVG symbols rendered via <use>.

Icons are stroke-based, monochrome, and inherit colour from context
Icon meaning comes from shape, not colour
All icons use stroke="currentColor" and no fills
New icons must match stroke rhythm and optical weight
No third-party icon sets may be introduced without restyling

Violations should fail review.

Summary Principle: Icons in Trevarn are quiet, systematic, and intentional. Meaning comes from form. Colour comes from context. Consistency builds trust.

This system applies to Difenn today and every Trevarn product tomorrow.

Trevarn — Brand Guidelines

Icon System