SVG Icon and Graphic Asset Preparation for Websites

Imagine: a designer hands over a layout from Figma, you open it and see dozens of PNG icons with hardcoded blue color. On Retina they are blurry, in dark mode unreadable, and loading each file separately creates 50 HTTP requests that kill Core Web Vitals. We solve this problem at the asset preparation stage: we turn scattered rasters into a unified SVG icon system optimized for any device and theme.

Formats: What and When

SVG sprite is the web standard. It scales without loss, supports currentColor for dynamic theming, CSS animations, and weighs 0.5–3 KB per icon. Traffic savings up to 60% compared to PNG — that's up to $500 per month in CDN costs for high-traffic sites. For simple shapes, SVG is 10–50 times lighter than PNG (a 10x to 50x improvement). We keep PNG only for complex gradients – need 1x, 2x, 3x versions for Retina. Icon Font (Font Awesome, Material Icons) is outdated: poor accessibility, FOIT on load. Use it only if the project already relies on it.

How to Prepare SVG Icons for Integration?

An icon ready for development must:

1. Use currentColor instead of a hardcoded color:

   <path fill="currentColor" d="M..." />
   

   Then color: red on the parent changes the icon color.
2. Have a fixed viewBox, usually 0 0 24 24 or 0 0 20 20.
3. Not contain extra attributes – id, class, style, data-* from Figma export must be removed. Tool: SVGO or online svgomg.net.
4. Be optimized – SVGO removes unnecessary <g>, merges paths, removes whitespace. Typical savings: 30–60% file weight. This reduces hosting costs and speeds up loading. For accessibility, we add role="img" and aria-label where needed.

Why an SVG Sprite Speeds Up Loading by 10x?

Using a sprite reduces the number of HTTP requests from dozens to one – a 10–50 times reduction (10x to 50x better). The sprite is cached by the browser: after the first load, icons appear instantly on all pages. Unlike CSS icons (background-position), SVG sprite retains sharpness and supports currentColor. We have prepared assets for over 100 sites and know how to build a sprite correctly.

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="icon-search">
      <path fill="currentColor" d="M10 2a8 8 0 0 0-6.32 12.9l-2.38 2.38 1.41 1.41 2.38-2.38A8 8 0 1 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/>
    </g>
  </defs>
  <use href="#icon-search"/>
</svg>

Format Comparison

Icon Systems

Ready-made icon libraries worth considering before drawing from scratch:

If the brand requires unique icons, we design them based on a chosen grid (24×24, stroke 1.5–2px for outline style, uniform corner radius).

What Is Included in Favicon and App Icons?

Today favicon is not just a single ICO file. Minimum set:

• favicon.ico – 32×32, for legacy browsers
• favicon.svg – vector, supports prefers-color-scheme
• apple-touch-icon.png – 180×180, for iOS Safari
• icon-192.png + icon-512.png – for PWA manifest

Example SVG favicon with theme adaptation:

<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, you need:

• OG Image (Open Graph): 1200×630px, PNG or JPEG. Autogeneration via @vercel/og or Puppeteer – for dynamic pages.
• Twitter Card: 1200×628px (similar to OG)
• LinkedIn Banner: 1128×191px (for corporate pages)

What is Included in Asset Preparation Work

Everything turnkey: from audit to integration.

• Audit of source layouts and SVG export
• Cleaning and optimization of each file via SVGO
• Building a single SVG sprite hosted on a CDN with caching headers
• Generating favicon set (ICO, SVG, PNG, PWA)
• OG image templates with dynamic variables
• Integration documentation and code snippets
• Training session for your developers on icon usage
• Post-launch support for 30 days

Timelines and Cost

Preparation of a full asset set (optimization of existing icons, SVG sprite, favicon set, OG template) takes 2–4 days depending on volume. Starting from $500 for a complete set. We offer a free assessment of your project – contact us. Get a consultation: our engineers will select the optimal solution for your tasks.

We have been working with web projects for over 5 years and have prepared assets for 100+ sites. Our track record guarantees a 60% reduction in HTTP requests. The original SVG format specifications are defined by SVG 2 from W3C.

How do we guarantee design-to-code fidelity?

We restructure the UX/UI process so that design and code do not diverge. Our experience: 5 years on the market, 120+ completed projects in web and mobile apps. We work under a contract with a fixed timeline guarantee. Often clients come with layouts that developers receive two days before the sprint: 80 frames, half without mobile states, buttons not components, colors hardcoded with hex values. Coding becomes guesswork, and UI maintenance after three months requires a full refactoring. Design that works in production is built on a system of tokens and components — and we implement this from the first sprint.

Why design without tokens breaks code, and how we fix it

How Figma becomes an engineering tool

Figma is not just "a place to draw." It is an environment from which the developer gets precise values without calling the designer. We use Design Tokens — unified variables for colors, spacing, radii. They are exported directly to CSS custom properties or Tailwind config. For example, color/primary/500, spacing/md, radius/button. Without tokens, design and code diverge within a month.

What is the role of auto layout in responsive design?

Auto layout is mandatory. Components without auto layout break when text changes. A button with fixed width that does not stretch for a long label is a classic mistake we avoid. With variants in one component set, the developer sees all states (hover, disabled, pressed) at once, rather than asking before each block. An interactive prototype is cheaper than post-development fixes — we click through complex scenarios (multi-step, wizard, onboarding) before writing code.

What do design systems provide and when are they overkill?

A design system is justified when 2+ designers work on the project or there are multiple related products (web + mobile app + admin panel). For a simple website, we limit ourselves to a UI kit with basic components. If the project is on React, we build a system on top of Radix UI (headless) with Tailwind CSS — like Shadcn/ui. Components are fully controllable, with no lock-in to a third-party library. Wikipedia calls this approach strategically correct for scaling.

How do we ensure responsiveness without surprises?

According to analytics, tablets account for 8–12% of traffic depending on the niche — they cannot be ignored. But we do not create "desktop + mobile" with three breakpoints. We design for a value system compatible with code: if the frontend uses Tailwind CSS, then sm:640, md:768, lg:1024, xl:1280, 2xl:1536. The designer works with the same numbers in Figma. Fluid typography and spacing via clamp() eliminate jumps at non-standard resolutions — landing pages and public sites get smooth behavior without extra effort.

What is included in the deliverables

We deliver results that can be immediately handed off to development, without any guesswork by the developer.

Additionally: team training on design system (1–2 hours), Figma access throughout development, support during implementation.

How we guarantee UI quality

Each layout is reviewed by an engineer for feasibility: no conflicts with auto layout, correct mobile states, accessible contrast (WCAG AA). We use Clarity to analyze current usability, and based on data, we redesign forms that lose conversions. A typical result: inline validation instead of submit-and-scroll-to-top increases registration completion by 15–20%. Skeleton screens instead of spinners reduce perceived loading time.

Timeline and cost estimates

Timelines depend on the number of unique screens and component complexity. Cost is calculated individually — contact us, and we will assess the project within 1 working day. Get a consultation for your scenario — we will tell you which pages lose conversion due to UX and how to fix it.