Why Icons Matter

What are icons used for? Icons are everywhere in modern digital design—in navigation menus, buttons, status indicators, social media profiles, mobile apps, websites, and user interfaces. They're visual shortcuts that communicate meaning instantly, often faster than words. Icons guide users through interfaces, highlight important actions, and create visual hierarchy. They make complex information digestible and help users navigate intuitively. Whether it's a hamburger menu, a download button, or a social media icon—icons are the universal language of digital design.

Why are they so important? Icons break down language barriers and make interfaces accessible to everyone. They reduce cognitive load by replacing text with recognizable symbols, making your UI cleaner and more scannable. Good icons improve usability, speed up navigation, and create a professional, polished look. In a world where attention spans are short, icons help users find what they need quickly. Without consistent, well-designed icons, your interface feels cluttered and confusing. With the right icons, you create an experience that feels intuitive and modern.

What can you achieve with them? With a consistent icon system, you improve user experience and make your interfaces more intuitive. Icons help users understand functionality at a glance, reduce the need for explanatory text, and create visual consistency across all touchpoints. They make your designs feel more professional and polished, whether you're building a website, mobile app, or dashboard. The right icon choice can guide users through complex workflows, highlight key actions, and create an emotional connection. Whether you're a startup or an established business: Consistent icons are essential for creating interfaces that users love to use.

Icon Libraries

Official icon libraries used across kieks.me GbR brand implementations. These libraries provide consistent, high-quality icons for all digital projects.

Tabler Icons

The primary icon library for kieks.me GbR digital projects. Tabler Icons provides over 4,000 free, open-source icons optimized for modern web applications.

Icon Examples

Home

User

Settings

Search

Mail

Notifications

Favorite

Share

Installation

Install via npm:

npm install @tabler/icons-webfont

Or use CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">

Usage

Use icons with the ti class prefix:

<i class="ti ti-home"></i>
<i class="ti ti-user text-aqua-700"></i>
<i class="ti ti-settings text-2xl"></i>

Resources

Brand Icons

Brand-specific icons and custom iconography designed for kieks.me GbR. These AI-themed icons are used consistently across brand materials and digital implementations.

AI Brain Icon

AI Brain

Neural network brain icon representing artificial intelligence and machine learning capabilities.

SVG
AI Robot Icon

AI Robot

Modern robot icon representing artificial intelligence, automation, and intelligent systems.

SVG
AI Neural Network Icon

Neural Network

Neural network nodes and connections icon representing machine learning and deep learning.

SVG

Usage Guidelines

  • Use these icons to represent AI-related features, services, or content
  • Maintain consistent sizing within the same context
  • Icons use brand colors (Aqua #00FFDC, Fuchsia #FF008F, Navy #1E2A45)
  • Available in SVG format for scalable use
  • Icons can be customized by adjusting SVG fill colors to match your design needs

Download Brand Icons

Download all brand-specific icons in SVG format.

Usage Guidelines

Best Practices

  • Use consistent icon sizes within the same context
  • Maintain proper spacing around icons (minimum clear space)
  • Use icons that are universally recognizable
  • Ensure icons are accessible (provide alt text or aria-labels)
  • Match icon style to your design system
  • Use icons to enhance, not replace, important text

Common Use Cases

  • Navigation menus and breadcrumbs
  • Action buttons (save, delete, edit, etc.)
  • Status indicators and notifications
  • Social media links and sharing
  • Form inputs and validation
  • Data visualization and charts

Accessibility

Icons should always be accessible to all users. Follow these guidelines:

  • Provide descriptive text labels for icon-only buttons
  • Use aria-label or aria-labelledby attributes
  • Ensure sufficient color contrast (WCAG AA compliant)
  • Don't rely solely on color to convey meaning
  • Test with screen readers to ensure proper interpretation

Sizing Guidelines

16px (Base)

Small UI elements

20px (Default)

Standard buttons

24px (Large)

Prominent actions

32px+ (Hero)

Hero sections

Common Icons

Frequently used icons in kieks.me GbR projects. These icons are available from Tabler Icons.

Navigation

home

menu

back

next

down

up

Actions

add

edit

delete

download

upload

confirm

Communication

mail

notify

message

phone

share

link

Status

success

warning

error

info

loading

locked

Resources

Tabler Icons

Documentation