Pine Icon Library

A simple way to add beautiful icons to your web projects using Kajabi's Pine Design System. These icons work in any modern browser and are easy to customize.

What's Included

• Ready-to-use SVG icons that load fast
• Works in any modern browser
• Easy to change colors and sizes
• Works with TypeScript
• Built for accessibility

Quick Start

Choose one of these two simple ways to start:

1. Direct Browser Use (No Framework Needed)

Add this line to your HTML:

<script type="module" src="https://cdn.jsdelivr.net/npm/@pine-ds/icons@latest/dist/pds-icons/pds-icons.esm.js"></script>

How to Use Icons

Basic Example

<pds-icon name="icon-name"></pds-icon>

Customize Your Icons

Change the size:

<!-- Using preset sizes -->
<pds-icon name="icon-name" size="small"></pds-icon>     <!-- 12px -->
<pds-icon name="icon-name" size="regular"></pds-icon>   <!-- 16px -->
<pds-icon name="icon-name" size="medium"></pds-icon>    <!-- 20px -->
<pds-icon name="icon-name" size="large"></pds-icon>     <!-- 24px -->

<!-- Using custom sizes -->
<pds-icon name="icon-name" size="24px"></pds-icon>

Change the color:

<pds-icon name="icon-name" color="#663399"></pds-icon>

Available Options

Option	What it Does	Default	Examples
name	Picks which icon to show	Required	"menu", "close"
size	Sets icon size	"regular" (16px)	"small", "medium", "24px"
color	Changes icon color	Matches text color	"#663399", "blue"

Need Help?

Common Problems

1. Icons not showing up?

   • Check that you added the script correctly
   • Make sure you're using the right icon name
   • Check your browser's console for errors

2. Build issues?

   • Make sure you have Node.js version 22.7.0 or newer
   • Try running npm install to reinstall everything

Get Support

Found a bug or need a new feature? Open an issue

Want to Contribute?

We welcome help! Here's how to get started:

1. Fork the project

2. Clone your fork:

   git clone https://github.com/YOUR_USERNAME/pine-icons.git
   cd pine-icons

3. Install what you need:

   npm install

4. Start the development server:

   npm start

   This runs on port 7200 and shows your changes live.

5. Make your changes and test them:

   npm test

6. Create a pull request with your changes

Development Requirements

• Node.js v22.7.0 or newer
• npm (comes with Node.js)
• Git