Icon Processing Service - API Documentation

🚀 Quick Start

Generate PNG icons on-demand using this simple URL pattern:

https://icons.realty.com.au/{set}/{icon-name}?w={width}&color={color}

Required Parameters

{set}: Icon set folder name (see table below)
{icon-name}: Icon filename without .svg extension

Optional Query Parameters

w: Width in pixels (default: 512, max: 2000)
color: CSS color value (default: "black")

📦 Available Icon Sets

Set Name	Type	Count	Description
`fa-5-free-brands`	Fill	458	FontAwesome 5 Free Brands
`fa-5-free-regular`	Fill	152	FontAwesome 5 Free Regular
`fa-5-free-solid`	Fill	1002	FontAwesome 5 Free Solid
`lucide`	Stroke	~1400	Lucide Icons

⚠️ Color Behavior:

Fill-based icons (FontAwesome): color sets the fill attribute
Stroke-based icons (Lucide): color sets the stroke attribute

🎨 Color Parameter

The color parameter accepts various CSS color formats:

Supported Formats

Hex: #FF5733, #F57, ff5733
Named: red, blue, forestgreen
RGB: rgb(255,87,51)
RGBA: rgba(255,87,51,0.8)

💡 Example Usage

Basic Examples

# FontAwesome solid home icon, 64px, red
https://icons.realty.com.au/fa-5-free-solid/home?w=64&color=red

# FontAwesome brands GitHub logo, 128px, white
https://icons.realty.com.au/fa-5-free-brands/github?w=128&color=white

# Lucide user icon, 100px, blue
https://icons.realty.com.au/lucide/user?w=100&color=blue

# Default size (512px), default color (black)
https://icons.realty.com.au/fa-5-free-solid/heart

Advanced Examples

# High resolution icon (1500px)
https://icons.realty.com.au/fa-5-free-solid/rocket?w=1500&color=%23FF6B35

# RGBA with transparency
https://icons.realty.com.au/lucide/alert-circle?w=200&color=rgba(255,0,0,0.7)

# Custom brand color
https://icons.realty.com.au/fa-5-free-brands/facebook?w=256&color=%233b5998

📊 Response Details

✅ Success Response (200)

Content-Type: image/png
Cache-Control: public, max-age=31536000, immutable
Body: Base64-encoded PNG image

❌ Error Responses

400 Bad Request: Invalid parameters (width, color format)
404 Not Found: Icon or set not found
500 Internal Server Error: Processing error

📝 Important Notes

Icon Name Format: Use kebab-case (lowercase with hyphens)
- ✅ Correct: /lucide/user-check
- ❌ Incorrect: /lucide/userCheck, /lucide/user_check
URL Encoding: Encode special characters (# → %23)
Width Limits: Min 1px, Max 2000px (recommended: 16-512px)
Performance: First request generates; subsequent requests served from edge cache

🔍 Icon Discovery

FontAwesome 5 Free: Official Documentation
Lucide: Official Icon Library

⚙️ Technical Architecture

Runtime: Netlify Functions (AWS Lambda)
Processing: Sharp.js for SVG → PNG conversion
Caching: Netlify On-Demand Builders (edge caching)
Language: TypeScript
Security: Input sanitization, path traversal prevention, width limits