Senastra — Icons

Minimal, stroke-based icon system for modern interfaces

Icon Style Rules

Consistent visual language ensures clarity and professional appearance across all applications.

✓ Do

  • Stroke-based (not filled) for minimal aesthetic
  • 1.5px stroke at 24px size
  • 24x24 viewBox square canvas
  • 1px corner radius for internal corners
  • Round end caps and line joins
  • Optical centering not mathematical
  • Simple shapes, high legibility

✗ Don't

  • Avoid filled shapes in standard contexts
  • Don't mix filled/outline in same set
  • No overly detailed or complex icons
  • Avoid varying stroke widths
  • Don't deviate from grid alignment
  • Skip decorative elements
  • Prevent visual imbalance

Sizing Scale

Icons scale consistently across six standard sizes, maintaining visual hierarchy and usability.

Color Rules

Icons adapt to context through semantic color application and interactive states.

Default

Inherits text color via currentColor

Accent

On hover, focus, or active state

Disabled

Uses secondary text color

Success

For positive actions/status

Warning

For alerts and caution states

Error

For errors and destructive actions

Info

For informational content

Navigation

Core navigation and wayfinding icons. Used in menus, headers, and directional UI.

Actions

Common actions like add, edit, delete, and filtering. Used in toolbars and buttons.

Communication

Messaging, notifications, and sharing icons for user interaction and connectivity.

Data

File management, storage, and data visualization icons for information architecture.

System

Settings, user management, and security icons for system controls and authentication.

Status

Status indicators and feedback icons for states, alerts, and confirmations.

Usage Guidelines

Best practices for implementing icons in buttons, navigation, forms, and other UI contexts.

Icon + Text Combinations

Navigation Item

Verified

Input Adornment

Table Context

Name Status Action
design-guide.pdf Ready
Assets Draft

Spacing Rules

Maintains clear visual separation while keeping elements grouped together.
Creates comfortable touch/click targets (minimum 32px). Use 8px for 24px icons.
Scale icons proportionally on mobile: 16px for text, 20px for nav, 24px default.