KajabiPine 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
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
Build issues?
- Make sure you have Node.js version 22.7.0 or newer
- Try running
npm installto 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:
- Fork the project
- Clone your fork:
git clone https://github.com/YOUR_USERNAME/pine-icons.git cd pine-icons - Install what you need:
npm install Start the development server:
npm startThis runs on port 7200 and shows your changes live.
Make your changes and test them:
npm testCreate a pull request with your changes
Development Requirements
- Node.js v22.7.0 or newer
- npm (comes with Node.js)
- Git