@reliability/icons

A comprehensive SVG icon library for the Reliability Design System, built with Lit web components.

Features

• ✅ 201 SVG Icons - Complete icon set optimized for web
• 🎨 Lit Web Components - Built with modern web standards
• 📦 Tree-Shakable - Import only the icons you need
• 🎯 TypeScript Support - Full type definitions included
• 📏 Responsive Sizing - 5 size variants (xs, sm, md, lg, xl)
• 🎨 Customizable Colors - Uses currentColor by default
• 🚀 Framework Agnostic - Works with React, Vue, Angular, or plain HTML

Installation

npm install @reliability/icons

Usage

As Web Component

The simplest way to use icons is with the <rel-icon> web component:

<!-- Import the package -->
<script type="module">
  import '@reliability/icons';
</script>

<!-- Use the icon -->
<rel-icon name="add"></rel-icon>
<rel-icon name="close" size="lg"></rel-icon>
<rel-icon name="check" color="#00ff00"></rel-icon>

Available Sizes

• xs - 12px
• sm - 16px
• md - 20px (default)
• lg - 24px
• xl - 32px

Using Icon Dictionary

You can also import the icon dictionary directly:

import { RelIcons } from '@reliability/icons';
import { html, LitElement } from 'lit';

class MyComponent extends LitElement {
  render() {
    return html`
      <div class="icon-wrapper">
        ${RelIcons['add']}
      </div>
    `;
  }
}

Tree-Shakable Individual Imports

For optimal bundle size, import only the icons you need:

import { iconAdd, iconClose, iconCheck } from '@reliability/icons/svgs';
import { html } from 'lit';

const template = html`
  <div>${iconAdd}</div>
  <div>${iconClose}</div>
  <div>${iconCheck}</div>
`;

Available Icons

The library includes 201 icons across multiple categories:

Actions

cancel_circle, check_circle, block, apps, more_vertical, hamburger, plus, minus, refresh, download, upload, search, assignment, document, copy, pencil, delete, settings, person_remove, person_add, print, sort, filter, mic, thumbs_up, send, share, check, close

Arrows & Navigation

arrow_expansion, direction_left, direction_right, arrow_down, arrow_up, arrow_left, arrow_right, arrow_from_bottom, arrow_from_top, arrow_from_left, arrow_from_right, arrows_horizontal, arrows_vertical, caret_down, caret_up, caret_right, caret_left, chevron_down, chevron_up, chevron_left, chevron_right, go_back

Business & Operations

processing, service_request, edit_square, add_service, recent_search, saved_search, pipeline, repeat, services, open_in_new, import, replace, sort_arrows, sort_down_arrow, sort_up_arrow, swap_vertical

Date & Time

today, calendar_month, calendar_today, calendar_range, event_available, alarm_clock, history, update, watch, timer, time_filed, hourglass, gavel_with_clock

Communication

photo_camera, front_hand, lock, gavel, signature, attach_file, link, pending, secure_lock, email, forward_to_inbox, phone, sales_rep, chat

Files & Documents

us_dollar, file_claim, add_note, documents, id, article, check_file, drag, horizontal_drag, vertical_drag

Status & Indicators

discount, verified, password, local_library, whats_hot, trophy, square_round_edges, status_loading, status, rows_narrow, checkbox_unchecked, checkbox_checked, checkbox_indeterminate, radio_button_unchecked, radio_button_checked, toggle_off, toggle_on

Alerts & Feedback

alert_circle, error, warning, help, info

Analytics & Data

villa, pie_chart, contrast, techometer, analytics, dashboard, web, trending_up, trending_down, advance_analytics, billing_invoices, financial, general

Transportation & Logistics

air_front, air_side, air_top, air, dryage, intermodal, lm_side, lm_top, ltl_front, ltl_side, ltl_top, rail_front, rail_side, sea_front, sea_side, sea_top, ship, tracking, truck_check, truck_filled, truck_outline, truck, shuttle, truckload_front, truckload_side, truckload_top

Notifications

notification_on, notification_off, manage_notification

Content & Media

image, heart_outlined, heart_filled, numbered_list, bullet_list, checklist, manage_search, edit_note

Logistics Operations

inbound, outbound, operational, self_service, service_levels, visibility, add_item, empty_container, filled_container, shipment, load_search

People & Users

remove_person, add_person, people, person

Social Media

facebook, instagram, twitter, linkedin, youtube, weblink

Miscellaneous

star_outlined, star_filled, visibility_on, visibility_off

Component API

<rel-icon>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | name | string | "" | Name of the icon to display | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Size of the icon | | color | string | currentColor | Custom color for the icon |

CSS Custom Properties

You can also customize the icon size using CSS custom properties:

rel-icon {
  --icon-size: 28px;
}

Framework Integration

React

import '@reliability/icons';

function MyComponent() {
  return (
    <div>
      <rel-icon name="add" size="lg"></rel-icon>
    </div>
  );
}

Vue

<template>
  <div>
    <rel-icon name="add" size="lg"></rel-icon>
  </div>
</template>

<script>
import '@reliability/icons';

export default {
  name: 'MyComponent'
}
</script>

Angular

import '@reliability/icons';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<rel-icon name="add" size="lg"></rel-icon>',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MyComponent {}

Development

Build

npm run build

Clean Build

npm run rebuild

Publishing

cd packages/icons
npm publish --access public

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.