@pgodev/pgo-icons

Framework-agnostic SVG icon package for the PGO design system. 1,178 icons across 20 categories, exported as plain JavaScript objects. Works with any framework or vanilla JS.

Installation

npm install @pgodev/pgo-icons

Usage

Named import (tree-shakeable)

Import icons by name. Bundlers will only include what you use.

import { Edit03Icon, ArrowCircleUpIcon, renderIcon } from '@pgodev/pgo-icons';

const svg = renderIcon(Edit03Icon);
// → <svg xmlns="..." viewBox="336.0 356.0 24 24" width="24" height="24" ...>...</svg>

Render options

const svg = renderIcon(Edit03Icon, {
  size: 32,           // width & height in px        (default: 24)
  color: '#5F0032',   // CSS color property value     (default: 'currentColor')
  strokeWidth: 1.5,   // overrides all stroke-width   (default: from source)
  class: 'my-icon',   // adds class to the <svg> tag  (default: none)
});

Since icons use stroke="currentColor", you can also control color with the CSS color property on a parent element instead of the color option.

String lookup

Useful when the icon name comes from data (e.g. a config file or API response):

import { getIcon, renderIcon } from '@pgodev/pgo-icons';

const icon = getIcon('edit-03');   // → Edit03Icon object, or undefined if not found
const svg  = renderIcon(icon, { size: 20 });

Full registry

import { icons } from '@pgodev/pgo-icons';

Object.keys(icons);    // → ['add-square', 'alert-circle', 'arrow-circle-up', ...]
icons['edit-03'];      // → { name, category, viewBox, content, type }

Vue example

<template>
  <span v-html="svg" />
</template>

<script setup>
import { getIcon, renderIcon } from '@pgodev/pgo-icons';

const props = defineProps({ icon: String, size: { default: 24 } });
const svg = computed(() => {
  const def = getIcon(props.icon);
  return def ? renderIcon(def, { size: props.size }) : '';
});
</script>

Icon object shape

Every icon export is a plain object:

{
  name: 'edit-03',            // kebab-case, matches the source filename
  category: 'general',        // source folder name
  viewBox: '336.0 356.0 24 24', // preserved exactly from the Figma export
  content: '<path ... />',    // inner SVG markup — stroke="#1C1917" replaced with currentColor
  type: 'stroke',             // 'stroke' | 'fill' | 'mixed'
}

Note on viewBox: Figma exports use non-zero origins (e.g. 336.0 356.0 24 24). This is intentional — the path coordinates match the offset and icons render correctly at any size.

Naming convention

| Source file | Named export | String key | |--------------------------|-----------------------|-----------------------| | plus.svg | PlusIcon | 'plus' | | user-01.svg | User01Icon | 'user-01' | | arrow-right-01.svg | ArrowRight01Icon | 'arrow-right-01' | | filter-funnel-01.svg | FilterFunnel01Icon | 'filter-funnel-01' |

Icon Reference

1,178 icons across 20 categories.

alerts-feedback (26)

arrows (92)