IGrow Icon System

The sprite at system/icons/sprite.svg contains 31 Lucide UI icons and 4 Simple Icons brand marks. They serve different purposes and have different usage rules.

Library 1 — Lucide (UI icons)

Source: lucide.dev
Licence: ISC
Style: Stroke, 1.75px, currentColor, 24×24
Use for: All UI contexts — navigation, status, property specs, contact details, actions, form fields

Rendering

<!-- Sprite reference (recommended for HTML/WordPress) -->
<svg class="ig-icon" aria-hidden="true">
  <use href="/path/to/system/icons/sprite.svg#bed"/>
</svg>

<!-- React (lucide-react package) -->
import { Bed } from 'lucide-react'
<Bed size={24} strokeWidth={1.75} aria-hidden="true" />

<!-- WordPress PHP helper -->
<?php echo igrow_icon('bed'); ?>

Sizing

Colour

Icons inherit currentColor — set color on the parent element, not on the SVG itself.

<span style="color: var(--color-accent-primary)">
  <svg class="ig-icon" aria-hidden="true"><use href="#star"/></svg>
</span>

Library 2 — Simple Icons (brand marks)

Source: simpleicons.org
Licence: CC0 1.0 Universal (public domain)
Style: Filled brand marks, 24×24, fill="currentColor"
Use for: Social media links in footers and contact sidebars — nowhere else

Brand marks are trademark-protected by their respective companies regardless of the CC0 icon licence. Use them only to link to the corresponding platform — never alter their shape, apply gradients, or use them decoratively.

Rendering

<!-- Always on a parent with color: white (footer/dark background) -->
<a href="https://facebook.com/IGrowWealth" aria-label="Facebook">
  <svg class="ig-icon" aria-hidden="true">
    <use href="/path/to/system/icons/sprite.svg#facebook"/>
  </svg>
</a>

Always provide aria-label on the <a> — the SVG is aria-hidden. Use the platform name only ("Facebook", not "Follow us on Facebook").

Bundled brand marks

Adding new icons

Adding a Lucide icon:

1. Find it at lucide.dev
2. Copy the SVG source
3. Add a <symbol id="name" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"> block to the Lucide section of sprite.svg
4. Update lucide-list.md with the context → name mapping
5. Update the inline sprite in system/preview/foundations.html

Adding a Simple Icons brand mark:

1. Find it at simpleicons.org
2. Copy the SVG <path> content
3. Add a <symbol id="name" viewBox="0 0 24 24" fill="currentColor"> block to the Simple Icons section of sprite.svg
4. Update lucide-list.md with the brand → sprite ID entry
5. Update the inline sprite in system/preview/foundations.html

Full icon reference

See lucide-list.md for the complete context → sprite ID mapping for both libraries.