bit-icons

A free, open-source dot-grid icon library. 215+ pixel-perfect icons rendered as square dots on a 7x7 grid.

Think Font Awesome, but with a bit-art aesthetic.

Features

• 215+ icons — UI, arrows, communication, business, manufacturing, brands, and more
• Pixel-perfect — Every icon is hand-crafted on a 7x7 dot grid
• Zero dependencies — Pure SVG, CSS, or JS
• Customizable — Icons inherit color and scale with font-size
• Free forever — MIT licensed, free for personal and commercial use

Quick Start

CDN (easiest)

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

<span class="bi bi-heart"></span>
<span class="bi bi-search"></span>
<span class="bi bi-settings"></span>

npm

npm install bit-icons

// Import the CSS
import 'bit-icons/dist/bit-icons.css';

<span class="bi bi-heart"></span>

Individual SVGs

<img src="https://unpkg.com/bit-icons/dist/svg/heart.svg" width="24" alt="heart">

JavaScript

import icons from 'bit-icons';

// Access the raw 7x7 grid array
console.log(icons.heart);
// [[0,1,0,0,0,1,0], [1,1,1,0,1,1,1], ...]

Icon Categories

| Category | Examples | |----------|---------| | UI | heart, star, search, settings, bell, trash, edit, lock | | Arrows | arrow-up, arrow-down, chevron-left, chevron-right | | Communication | comment, chat, reply, mail, mention, broadcast | | Business | invoice, contract, briefcase, dollar, target, handshake | | Manufacturing | factory, warehouse, forklift, truck, conveyor, robot | | Status | approved, pending, rejected, in-progress, complete | | Data | chart, pie-chart, bar-chart, spreadsheet, analytics | | People | user, users, team, role, assign, delegate | | Operations | inventory, barcode, scanner, quality, maintenance | | Brands | github, linkedin, slack, figma, youtube, discord | | Navigation | chevrons, external-link, expand, collapse, sidebar | | Media | play, pause, stop, mic, headphones, camera |

Customization

Sizing

Icons scale with font-size:

.bi { font-size: 1.5rem; }   /* default */
.bi-lg { font-size: 2rem; }
.bi-sm { font-size: 0.875rem; }

Coloring

Icons inherit the current text color:

<span class="bi bi-heart" style="color: red;"></span>
<span class="bi bi-star" style="color: gold;"></span>

Cheatsheet

Browse all icons with search, copy-to-clipboard, and SVG download:

Open dist/cheatsheet.html or visit the live cheatsheet after deploying.

Building from Source

# Install (no dependencies needed)
git clone https://github.com/user/bit-icons.git
cd bit-icons

# Build everything
npm run build:all

# Or build individually
npm run build            # SVGs, CSS, JS
npm run build:cheatsheet # Interactive docs

Adding Icons

Each icon is a 7x7 grid in src/icons/index.js:

exports.myicon = [
  [0,0,0,0,0,0,0],
  [0,0,1,1,1,0,0],
  [0,1,0,0,0,1,0],
  [0,1,0,0,0,1,0],
  [0,1,0,0,0,1,0],
  [0,0,1,1,1,0,0],
  [0,0,0,0,0,0,0],
];

• 1 = filled square, 0 = empty (background dot at 10% opacity)
• Corner positions [0,0], [0,6], [6,0], [6,6] are excluded from rendering
• Run npm run build:all after adding

Contributing

Contributions welcome! To add an icon:

1. Fork the repo
2. Add your icon grid to src/icons/index.js
3. Run npm run build:all and check the cheatsheet
4. Submit a PR

License

MIT — free for personal and commercial use. No attribution required.

See LICENSE for details.