DoshCons & v0.2.0 coming April 30

Home

Installation

Home

Installation

Getting Started

A modern, accessible icon library for React applications that adapts to user preferences automatically. All icons are available as React components. In order to use them in your project, and make sure of our accessibility features, you can follow our instructions below.

Install Tayer Icons from npm:

bash

npm i @razorloaf/tayer-icons

Adding Your Own

Only teams that work on this project can add icons. Adding icons is simple and automated, only requiring the designer or developer to follow 3 simple steps:

Place SVG files in the src/svg directory

Run the build process: npm run build:icons

Import and use in your project

Example

</svg>

Behind The Scenes

Our aim is to create a zero-friction workflow, eliminating the gap between design assets and implementation. When you add an SVG to the library, our build process:

Optimizes the SVG: Removes unnecessary attributes, normalizes structure, and prepares for React

Generates a TypeScript component: Creates a properly typed React component with intelligent icon properties

Implements accessibility features: Adds proper ARIA attributes, screen reader support, and more

Adds OS adaptability: Builds in support for high contrast mode, reduced motion, and other OS settings

Creates a semantic API: Transforms filenames into intuitive component names with type safety

Icon Properties

All icons accept the following props:

Prop

Type

Default

Description

size

number

24

Width and height in pixels

color

string

'currentColor'

Color of the icon (inherits text color by default)

title

string

Auto-generated

Accessible title (set to '' for decorative icons)

decorative

boolean

false

Mark as decorative (hidden from screen readers)

className

string

''

Additional CSS classes

Plus all standard SVG attributes like strokeWidth, fill, etc.

The Icon Problem

Working with icons in modern web applications has had issues where traditional approaches force you to choose between:

Icon fonts: Simple to use but poor for accessibility, performance, and customization

Manual SVG imports: Better control but tedious for both designer and developer

Copy-paste components: Results in code duplication, inconsistency, and tech debt

Complex abstraction layers: Adds unnecessary dependencies and complexity

None of these approaches consider the complete lifecycle of icons in a design system. Things change. Regularly. This icon library is built with an approach that is both simpler for developers and more comprehensive in addressing real-world needs. You may be used to this kind of setup below:

Example

import { Home, Settings } from '@razorloaf/tayer-icons';

function App() {

return (

<nav>

</nav>

);

}

Accessibility

Unlike traditional icon libraries that make accessibility an afterthought or extra work, Tayer icons include a comprehensive accessibility infrastructure that works invisibly:

Context-Awareness

<Home /> Home

</button>

Our icons automatically detect their context and adapt.

When an icon appears inside an interactive element, it knows to become decorative automatically preventing duplicate screen reader announcements. When used standalone, it gets proper semantic roles and accessible names.

OS Integration Without Overhead

Traditional icons ignore OS accessibility settings, creating a disconnect between user preferences and actual experience. Tayer icons automatically respect:

High Contrast Mode: Icons adapt their appearance when Windows High Contrast Mode is active, enhancing visibility for low-vision users

Reduced Motion Preferences: Any animations respect the user's motion preferences

Color Scheme Adaptation: Icons work seamlessly with light/dark mode transitions

Forced Colors Mode: Display correctly when browser color-forcing modes are active

All of this happens invisibly with zero configuration required. This isn't just convenient—it creates truly inclusive experiences that conform to WCAG standards. Was it worth the slight additional file size? Absolutely!

Developer Flexibility with Defaults

While accessibility is automatic, developers retain full control.

IconFamily: Design System Acceleration

Traditional icon libraries treat icons as isolated entities, ignoring their role in design systems. Tayer's IconFamily feature enables true design system thinking:

The Pattern Problem

Design systems group icons by context and visual properties, but traditional libraries require manual coordination:

The Family Solution

IconFamily creates coordinated icon groups that eliminate redundancy:

</IconFamily>

Why This Matters

For teams managing dozens or hundreds of icons, this reduces maintenance effort by orders of magnitude. When design requirements change, updates happen in one place, not hundreds. IconFamily provides: