Hatch Icons

Installation

1. Configure npm for GitHub Packages

Add the following to your ~/.npmrc (global, recommended) or create a .npmrc in your project root:

@hatchsoftware:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKENCopy

Replace YOUR_GITHUB_TOKEN with a GitHub Personal Access Token (classic) with read:packages scope.

2. Install the package

npm install @hatchsoftware/hatch-iconsCopy

3. Import the CSS

In your CSS or SCSS:

@import "@hatchsoftware/hatch-icons/dist/hatch-icons.css";Copy

Or in your JavaScript/TypeScript entry file:

import "@hatchsoftware/hatch-icons/dist/hatch-icons.css";Copy

Alternative: Manual installation

Download the font files from GitHub, copy them to your project, and import the CSS:

@import "path/to/hatch-icons.css";Copy

Usage

Use icons in your HTML:

<i class="hi hi-arrows-arrow-up"></i>
<i class="hi hi-general-check"></i>Copy

Icons inherit the current text color and size:

.my-icon {
  font-size: 24px;
  color: #ff4b24;
}Copy