UniLine

A comprehensive icon library with 660+ beautifully crafted icons. Available as React components, CSS icon font, or via CDN. Fully customizable with support for size, color, stroke width, and filled variants.

What you can accomplish:

Add icons to HTML using simple CSS classes

Import as React components with full TypeScript support

Customize size, color, and stroke width dynamically

Switch between outline and filled variants

Use via CDN for quick prototyping

Tree-shake unused icons for minimal bundle size

Installation

Package Managers

npm install @unizap/uniline

CDN

<link rel="stylesheet" href="https://unpkg.com/@unizap/uniline@latest/dist/uniline.min.css">

Usage

CSS Icon Font

Use the icon font classes for simple HTML integration

<!-- Include CSS -->
<link rel="stylesheet" href="https://unpkg.com/@unizap/uniline@latest/dist/uniline.min.css">

<!-- Outline icons -->
<i class="uni-heart" style="color: #e74c3c;"></i>
<i class="uni-star"></i>
<i class="uni-home"></i>

<!-- Filled icons -->
<i class="uni-heart-fill" style="color: #e74c3c;"></i>
<i class="uni-star-fill"></i>
<i class="uni-home-fill"></i>

React

Import and use icons as React components

import { Heart, Star, Home } from '@unizap/uniline';

function App() {
  return (
    <div>
      <Heart size={24} color="red" />
      <Star size={24} fill={true} />
      <Home size={32} strokeWidth={1.5} />
    </div>
  );
}

Props

Prop	Type	Default	Description
size	number	24	Size of the icon in pixels
color	string	currentColor	Color of the icon
strokeWidth	number	2	Stroke width for outline icons
fill	boolean	false	Use filled variant
className	string	-	Additional CSS classes