Website Icons and Graphic Assets Preparation
Icons are one of the most underestimated elements in development prep. Typical problem: designer drew icons in Figma, developer exported as PNG — and got raster icons with hardcoded color, blurry on Retina displays and no dark theme support.
Formats: What and When
SVG — web standard for icons. Scales without quality loss, supports currentColor for dynamic color, CSS animations, small weight (usually 0.5–3 KB per icon).
PNG — only for icons with complex gradient or texture that can't be reproduced in SVG. Need 1x, 2x, 3x versions for Retina.
SVG Sprite — all icons in one file, connected via <use href="#icon-name">. One HTTP request, cached by browser.
Icon Font (Font Awesome, Material Icons) — outdated approach. Poor accessibility, harder to control rendering, FOIT during load. Use only if already connected in project.
Preparing SVG Icons
Icon ready for development should:
-
Use
currentColorinstead of hardcoded color:<path fill="currentColor" d="M..." />Then
color: redon parent changes icon color. -
Have fixed viewBox, usually
0 0 24 24or0 0 20 20 -
Not contain extra attributes —
id,class,style,data-*from Figma export should be removed. Tool: SVGO or online svgomg.net -
Be optimized — SVGO removes extra
<g>, merges paths, removes spaces. Typical savings: 30–60% file weight.
Icon Systems
Ready icon libraries worth considering before drawing from scratch:
| Library | License | Icons | Style |
|---|---|---|---|
| Lucide Icons | MIT | 1500+ | Outline, 24×24 |
| Heroicons | MIT | 292 | Outline + Solid, 24×24 |
| Phosphor Icons | MIT | 9000+ | 6 styles |
| Tabler Icons | MIT | 5500+ | Outline, 24×24 |
| Material Symbols | Apache 2.0 | 3000+ | Variable font |
If brand requires unique icons — draw based on chosen grid (24×24, stroke 1.5–2px for outline style, unified corner radius).
Favicon and App Icons
Favicon in 2024 is not single ICO file. Minimum set:
-
favicon.ico— 32×32, for old browsers -
favicon.svg— vector, supported Chrome 80+, Firefox 84+ -
apple-touch-icon.png— 180×180, for iOS Safari -
icon-192.png+icon-512.png— for PWA manifest
SVG favicon supports prefers-color-scheme — different look in light and dark system theme:
<svg xmlns="http://www.w3.org/2000/svg">
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #fff; }
}
</style>
<path d="..."/>
</svg>
OG Images and Social Assets
For SEO and social sharing:
-
OG Image (Open Graph): 1200×630px, PNG or JPEG. Auto-generation via
@vercel/ogor Puppeteer — for dynamic pages. - Twitter Card: 1200×628px (similar to OG)
- LinkedIn Banner: 1128×191px (for corporate pages)
Timeline
Preparing complete asset set (optimizing existing icons, SVG sprite, favicon set, OG template) — 2–4 days depending on icon volume and source availability.