IGrow icon glossary

The sprite at system/icons/sprite.svg contains icons from two separate libraries with distinct purposes. Always reach for the right library for the context.

Library 1 — Lucide (UI icons)

Source: lucide.dev
Licence: ISC
Style: Stroke-based, 1.75px, currentColor, 24×24
Use for: Everything except brand/social marks — navigation, status, property specs, contact, actions

Convention: use the Lucide name when looking up or requesting an icon. If you need one not yet in the sprite, pull it from lucide.dev and add it to sprite.svg following the same stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" contract.

Bundled Lucide icons

IGrow context	Lucide name	Sprite ID
Accordion chevron	`chevron-down`	`chevron-down`
Reverse accordion chevron	`chevron-up`	`chevron-up`
Pagination prev / breadcrumb back	`chevron-left`	`chevron-left`
Pagination next / breadcrumb fwd	`chevron-right`	`chevron-right`
CTA-end arrow	`arrow-right`	`arrow-right`
Hamburger menu	`menu`	`menu`
Close / dismiss	`x`	`x`
Success alert / checkbox check	`check`	`check`
Info alert	`info`	`info`
Danger alert	`alert-circle`	`alert-circle`
Warning alert	`alert-triangle`	`alert-triangle`
Search input	`search`	`search`
Filters opener (with count)	`sliders`	`sliders`
Funnel filter (alt)	`filter`	`filter`
Phone number	`phone`	`phone`
Email address	`mail`	`mail`
In-app chat / "Talk to a consultant"	`message-circle`	`message-circle`
Property address	`map-pin`	`map-pin`
Date picker, viewing date	`calendar`	`calendar`
Bedroom spec	`bed`	`bed`
Bathroom spec	`bath`	`bath`
Parking spaces	`car`	`car`
Floor area (m²)	`ruler`	`ruler`
Pets allowed	`paw-print`	`paw-print`
Generic property / home	`home`	`home`
Apartment / development	`building`	`building`
Tenant onboarding / key handover	`key`	`key`
Quick win / valuation pitch	`zap`	`zap`
Star rating	`star`	`star`
Save / favourite	`heart`	`heart`
External link / PDF	`external-link`	`external-link`

Not bundled — pull from lucide.dev when needed

IGrow context	Lucide name
User profile avatar	`user` / `user-circle`
Locked / private listing	`lock`
Document / contract	`file-text`
PDF download	`file-down`
Image gallery	`image` / `images`
Wallet / payment	`wallet`
Currency (avoid — use the R prefix in copy instead)	`dollar-sign` ❌
Tag / badge	`tag`
Settings	`settings`
Help / FAQ	`circle-help`
Trending up (stat cards)	`trending-up`
Trending down (stat cards)	`trending-down`
Notifications / bell	`bell`
Logout	`log-out`

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 — do not alter the shape, apply gradients, or use them decoratively.

Bundled Simple Icons brand marks

Brand	Sprite ID	Brand colour	Notes
Facebook	`facebook`	`#0866FF`	Use white (`currentColor` on dark bg) for footer
Instagram	`instagram`	`#E4405F`	Use white for footer
LinkedIn	`linkedin`	`#0A66C2`	Use white for footer
WhatsApp	`whatsapp`	`#25D366`	Use white for footer

Usage

<!-- In a footer social row — set color: white on the parent -->
<div class="ig-footer__social" style="color: white;">
  <a href="https://facebook.com/IGrowWealth" aria-label="Facebook">
    <svg class="ig-icon" role="img" aria-hidden="true"><use href="#facebook"/></svg>
  </a>
  <a href="https://instagram.com/igrowwealth" aria-label="Instagram">
    <svg class="ig-icon" role="img" aria-hidden="true"><use href="#instagram"/></svg>
  </a>
</div>

Always provide an aria-label on the <a> tag — the SVG itself is aria-hidden. The label should be the platform name only ("Facebook", not "Follow us on Facebook").

Specific don'ts

❌ dollar-sign for prices — use the text R 7 000 instead.
❌ crown / trophy for premium tiers — feels boastful, off-brand. Use star or wording.
❌ Lucide social icons (facebook, instagram, linkedin exist in Lucide but are stroke-based and not brand-accurate) — always use the Simple Icons brand marks from the sprite instead.
❌ Brand marks outside of social link rows — they are logos, not UI icons.
❌ Recolouring brand marks to brand colours other than white/black — use currentColor white on dark backgrounds only.