v0.1.0 · Workspace Monorepo Release27 Families · 189 Production VariantsMIT Licensed

Precision-engineered icons for every modern runtime.

Explore 27 original icon families and 189 production vector variants across Thin, Light, Regular, Bold, Fill, Duotone, and Color styles for React, Vue, Web Components, React Native, Flutter, Android, and Apple Swift.

Explore All 189 Icons Developer Documentation GitHub Monorepo →

189

Production Vectors

Zero demo placeholders

Architectural Styles

Thin to Multicolor

Code Targets

Web, Mobile & Native

24×24

Optical Grid

Pixel-aligned geometry

Interactive Icon Explorer

Click any icon to customize stroke weight, Duotone & Color layers, or export SVG, PNG, WebP, Vector PDF, and 11-platform code.

Showing 27 of 27 families (189 variants)

/

Size:28px

Primary:#010520

Details →

Unified Multi-Style System

Seven Synchronized Architectural Styles

Compare all styles in full explorer →

Thin1px

1px precision hairline stroke for large display and high-DPI interfaces.

Light1.5px

1.5px refined stroke balanced for modern dense application layouts.

Regular2px

2px primary default stroke engineered for universal UI legibility.

Bold3px

3px heavy stroke for high-contrast emphasis and compact sizes.

FillLayered

Solid silhouette paths ideal for active states and primary indicators.

Duotone1.75px

Two-tone layered depth combining primary strokes with distinct secondary tone or opacity fills.

ColorLayered

Multicolor vector artwork preserving rich gradients and distinct semantic hues.

First-Class Native & Web Packages

Engineered for Web, Cross-Platform, Android & Apple

View all documentation guides →

@slatico/reactGuide →

React & Next.js

Tree-shakeable React SVG components with typed style, size, primary color, and Duotone secondary controls.

React 18 / 19 & Next.js App Router

@slatico/vueGuide →

Vue 3 & Nuxt

First-class Vue 3 functional icon components supporting all 7 architectural styles and reactive props.

Vue 3 Composition API & Nuxt 3

@slatico/svg · @slatico/web · @slatico/fontGuide →

Vanilla HTML, SVG & Web Components

Zero-framework SVG rendering, <slatico-icon> custom elements with Shadow DOM, and WOFF2/TTF icon fonts.

Pure SVG, Custom Elements & Webfonts

@slatico/react-nativeGuide →

React Native & Expo

Native vector rendering powered by react-native-svg with resolved Duotone colors and zero web-only CSS dependencies.

iOS, Android & New Architecture (Fabric)

slatico_iconsGuide →

Flutter (iOS, Android, Web & Desktop)

Multi-style SlaticoIcon widget and SlaticoIcons catalog backed by flutter_svg and bundled vector assets.

Dart 3 & Flutter 3.24+

com.infitus.slatico:slatico-androidGuide →

Android Native (Jetpack Compose & XML)

189 native Android VectorDrawable resources and Jetpack Compose SlaticoIcon composables with runtime tinting.

Jetpack Compose & Android View XML

SlaticoIcons (Swift Package)Guide →

Apple Native (SwiftUI, UIKit & AppKit)

Native CoreGraphics/SwiftUI vector path renderer with SwiftUI View, UIImage, and NSImage APIs.

iOS 15+, iPadOS, macOS 12+ & Mac Catalyst

Browser Runtime Verification

Live Web Components, SVG Sprites & Webfonts

Multi-Framework Tier 1 Integrations

Live Web Component, SVG Sprite & Multi-Framework Code Contracts

Inspect how the same authored 24×24 Tier 1 SVG sources compile into React, Vue 3, Native Web Components, SVG Sprites, and React Native.

import { BellIcon } from "@slatico/react/icons/bell";

export function Demo() {
  return (
    <BellIcon
      variant="duotone"
      size={28}
      color="#4F46E5"
      secondaryColor="#A855F7"
      secondaryOpacity={0.35}
      title="Notification Bell"
    />
  );
}

Live Browser Runtime Verification

Below are live browser instances rendered via native <slatico-icon> Custom Elements and @slatico/svg sprites alongside React.

<slatico-icon>Shadow DOM Element

<use href="#slatico-duotone-bell">@slatico/svg Sprite

renderSvgMarkup()@slatico/svg Inline

@slatico/fontWOFF2 • WOFF • TTF • CSS • 5 Monochrome Styles × 27 Icons = 135 Glyphs

Production Icon Font System (HTML, PHP, WordPress & Laravel Ready)

Live CSS icon font glyphs rendered directly from @slatico/font/slatico.css with stable Unicode Private Use Area (U+E001–U+E01B) codepoints.

CSS font-size:

CSS color:

5 Monochrome Font Families — house (0xE008)Slatico Regular

Click any Tier 1 glyph below to inspect its CSS class & Unicode PUA assignment:.slatico-house-regular

HTML & CSS Icon Font Usage0xE008

<link rel="stylesheet" href="slatico.css">

<!-- Selected Icon (house • regular • 0xE008) -->
<i class="slatico slatico-house-regular" aria-hidden="true"></i>

<!-- Examples across styles -->
<i class="slatico slatico-house-regular" aria-hidden="true"></i>
<i class="slatico slatico-bell-bold" aria-hidden="true"></i>
<i class="slatico slatico-user-fill" aria-hidden="true"></i>

/* Customize via standard CSS typography properties */
.custom-icon {
  font-size: 24px;
  color: #4F46E5;
  line-height: 1;
  vertical-align: -0.125em;
}

Why Duotone & Color Use SVG Instead of Icon Fonts

Standard monochrome web fonts (WOFF2 / TTF) render a single foreground glyph contour per character. Flattening Duotone (independent secondary tone and opacity layers) or Color (customizable primary and secondary vector fills) into a monochrome font would destroy their visual fidelity. Use @slatico/svg, @slatico/react, @slatico/vue, @slatico/web, or @slatico/react-native for Duotone and Color icons.