@rhavenside/baseline-icons

v1.0.0

Published

6 months ago

Icon font library from the Baseline Design System - lightweight and framework-agnostic

Downloads

0High
0Medium
0Low

rhavenside

icons icon-font baseline baseline-icons design-system css scss fonts

Baseline Icons

A comprehensive icon font library with 2,000+ icons - extracted from the Baseline Design System as a standalone, lightweight package.

Features

✓ 2,000+ Icons - Comprehensive collection of high-quality vector icons
✓ Lightweight - Only ~500KB for the complete icon font
✓ Framework Agnostic - Works with any framework or plain HTML/CSS
✓ Easy to Use - Simple class-based system
✓ Customizable - Easily change size, color, and style with CSS
✓ Multiple Formats - WOFF2 and WOFF font formats for broad browser support

Installation

Via npm

npm install @rhavenside/baseline-icons

Via CDN

<link rel="stylesheet" href="https://unpkg.com/@rhavenside/baseline-icons/dist/baseline-icons.css">

Or minified version:

<link rel="stylesheet" href="https://unpkg.com/@rhavenside/baseline-icons/dist/baseline-icons.min.css">

Usage

Basic HTML

After including the CSS file, use icons with the bl and bl-{icon-name} classes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="node_modules/@rhavenside/baseline-icons/dist/baseline-icons.css">
  <title>Baseline Icons Example</title>
</head>
<body>
  <i class="bl bl-heart-fill"></i>
  <i class="bl bl-star"></i>
  <i class="bl bl-github"></i>
  <i class="bl bl-search"></i>
</body>
</html>

With JavaScript/Module Bundlers

Import the CSS file in your JavaScript:

// ES6 Import
import '@rhavenside/baseline-icons/css'

// CommonJS
require('@rhavenside/baseline-icons/css')

Or use with React, Vue, Angular, etc.:

// React Example
import '@rhavenside/baseline-icons/css'

function MyComponent() {
  return (
    <div>
      <i className="bl bl-heart-fill"></i>
      <i className="bl bl-star"></i>
    </div>
  )
}

With SCSS

Import the SCSS source file for more customization options:

// Import SCSS source
@import '~@rhavenside/baseline-icons/scss';

// Or customize variables before importing
$baseline-icons-font-dir: '../fonts';
@import '~@rhavenside/baseline-icons/src/baseline-icons.scss';

Styling Icons

Icons inherit the text color and can be styled with CSS:

<!-- Size with font-size -->
<i class="bl bl-heart" style="font-size: 24px;"></i>
<i class="bl bl-heart" style="font-size: 32px;"></i>
<i class="bl bl-heart" style="font-size: 48px;"></i>

<!-- Color with color property -->
<i class="bl bl-heart-fill" style="color: red;"></i>
<i class="bl bl-star-fill" style="color: gold;"></i>
<i class="bl bl-github" style="color: #333;"></i>

Or with CSS classes:

.icon-large {
  font-size: 48px;
}

.icon-primary {
  color: #0066cc;
}

.icon-danger {
  color: #dc3545;
}

<i class="bl bl-heart-fill icon-large icon-danger"></i>

Icon Categories

The Baseline Icons library includes icons in the following categories:

UI & Interface - Arrows, chevrons, carets, navigation
Actions - Edit, delete, save, download, upload
Communication - Mail, chat, phone, notifications
Media - Play, pause, stop, volume, camera
Files & Folders - Documents, folders, file types
Social Media - Facebook, Twitter, Instagram, GitHub, LinkedIn
E-commerce - Cart, bag, credit card, wallet
Weather - Sun, cloud, rain, snow, storm
Technology - Devices, hardware, code, terminal
Business - Building, briefcase, calendar, clock
Shapes & Symbols - Geometric shapes, mathematical symbols
And many more...

Popular Icons

Here are some of the most commonly used icons:

<!-- Navigation -->
<i class="bl bl-arrow-left"></i>
<i class="bl bl-arrow-right"></i>
<i class="bl bl-chevron-down"></i>
<i class="bl bl-house"></i>

<!-- Actions -->
<i class="bl bl-search"></i>
<i class="bl bl-pencil"></i>
<i class="bl bl-trash"></i>
<i class="bl bl-check"></i>
<i class="bl bl-x"></i>

<!-- Communication -->
<i class="bl bl-envelope"></i>
<i class="bl bl-bell"></i>
<i class="bl bl-chat"></i>
<i class="bl bl-telephone"></i>

<!-- Media -->
<i class="bl bl-play-fill"></i>
<i class="bl bl-pause-fill"></i>
<i class="bl bl-camera"></i>
<i class="bl bl-image"></i>

<!-- Social -->
<i class="bl bl-github"></i>
<i class="bl bl-twitter"></i>
<i class="bl bl-facebook"></i>
<i class="bl bl-linkedin"></i>

<!-- UI Elements -->
<i class="bl bl-heart-fill"></i>
<i class="bl bl-star-fill"></i>
<i class="bl bl-gear"></i>
<i class="bl bl-three-dots"></i>

Icon Naming Convention

Icons follow a clear naming pattern:

Base icon: bl-{name} (e.g., bl-heart)
Filled variant: bl-{name}-fill (e.g., bl-heart-fill)
Directional: bl-arrow-{direction} (e.g., bl-arrow-left)
Size variants: bl-{name}-{size} (e.g., bl-dash-lg)
Style variants: bl-{name}-{style} (e.g., bl-circle-fill)

Browser Support

Baseline Icons supports all modern browsers:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Opera (latest)

Font formats:

WOFF2 - Modern browsers (recommended)
WOFF - Fallback for older browsers

Package Contents

@rhavenside/baseline-icons/
├── dist/
│   ├── baseline-icons.css        # Expanded CSS (with source map comment)
│   ├── baseline-icons.min.css    # Minified CSS (production ready)
│   └── fonts/
│       ├── baseline-icons.woff   # Icon font (WOFF format)
│       └── baseline-icons.woff2  # Icon font (WOFF2 format)
├── src/
│   └── baseline-icons.scss       # SCSS source file
└── README.md

Advanced Usage

Custom Font Path

If you need to customize the font file path, you can override the SCSS variable:

$baseline-icons-font-dir: '/custom/path/to/fonts';
@import '~@rhavenside/baseline-icons/src/baseline-icons.scss';

Using with CSS Variables

You can create reusable icon sizes and colors with CSS variables:

:root {
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-color-primary: #0066cc;
  --icon-color-danger: #dc3545;
}

.bl {
  font-size: var(--icon-size-md);
}

.bl.icon-sm { font-size: var(--icon-size-sm); }
.bl.icon-lg { font-size: var(--icon-size-lg); }
.bl.text-primary { color: var(--icon-color-primary); }
.bl.text-danger { color: var(--icon-color-danger); }

Building from Source

If you want to build the CSS from the SCSS source:

# Clone the repository or install via npm
npm install @rhavenside/baseline-icons

# Build CSS
npm run build

# Build minified CSS only
npm run build:minify

Related Packages

Baseline Icons is part of the Baseline Design System ecosystem:

@rhavenside/baseline - Complete design system with components, icons, and utilities
@rhavenside/scaffold - Layout system for structured page layouts
@rhavenside/cadence - Motion system for consistent animations

Built with ❤️ by rhavenside