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