Skip to main content

Professional Icon Delivery Workflow

Delivering icons professionally requires more than just creating good designs. The way you organize, format, and hand off icon assets impacts both client satisfaction and the efficiency of development teams who'll implement them.

Understanding Delivery Requirements

Before preparing any deliverables, clarify what the recipient actually needs. Different contexts have different requirements:

  • Web developers typically want SVG files, possibly an SVG sprite
  • Mobile developers need platform-specific formats and multiple resolutions
  • Desktop application teams may require ICO files for Windows or ICNS for macOS
  • Designers often want source files in Figma, Sketch, or Adobe formats
  • Marketing teams might need PNG files at specific sizes for various platforms

A quick conversation about requirements prevents rework and ensures your deliverables are immediately useful.

Preparing Source Files

Clean source files make exports predictable and edits straightforward. Before exporting:

  • Flatten unnecessary groups and layers
  • Remove hidden or unused elements
  • Ensure consistent artboard sizes across all icons
  • Check that colors use the correct color space (sRGB for web)
  • Verify stroke settings are consistent (width, caps, joins)
  • Convert text to outlines if fonts aren't being delivered

Well-organized source files also make it easier to update icons later without recreating them from scratch.

Export Settings for Each Format

Different formats require different export configurations:

SVG Export

  • Use "presentation attributes" rather than inline styles when possible
  • Remove unnecessary metadata (editor info, comments)
  • Keep viewBox attributes for proper scaling
  • Simplify paths where possible without losing quality
  • Consider whether to embed fonts or convert to outlines

PNG Export

  • Export at 1x, 2x, and 3x for responsive/retina support
  • Use PNG-24 for icons with transparency
  • Optimize file size with tools like TinyPNG or ImageOptim
  • Name files clearly: icon-name-24.png, icon-name-24@2x.png

ICO Export

  • Include multiple sizes in a single ICO file (16, 32, 48, 256)
  • Test the ICO at each size to ensure clarity
  • Use tools like IcoMoon or dedicated ICO exporters

File Organization

How you organize deliverables affects usability. A recommended structure:

delivery/
├── svg/
│   ├── optimized/
│   └── source/
├── png/
│   ├── 16/
│   ├── 24/
│   ├── 32/
│   ├── 48/
│   ├── 64/
│   └── 128/
├── ico/
├── source/
│   └── icons.fig (or .sketch, .xd)
├── sprites/
│   └── sprite.svg
├── README.md
└── LICENSE.txt

This structure lets recipients quickly find what they need without digging through mixed files.

Documentation

Include a README file that covers:

  • Icon list - Names and brief descriptions of each icon
  • Formats included - What's in each folder
  • Usage guidelines - Recommended sizes, spacing, color usage
  • Technical specs - Base size, stroke width, corner radius
  • Changelog - What changed from previous versions
  • Contact information - Who to reach for questions

Good documentation reduces support requests and helps teams implement icons correctly.

Quality Assurance Before Delivery

Run through this checklist before sending any deliverables:

  • All icons are present and named correctly
  • File sizes are reasonable (optimize if needed)
  • SVGs render correctly in browsers
  • PNGs have proper transparency (no white artifacts)
  • Icons align to pixel grid at intended sizes
  • Colors match the specification
  • Documentation is complete and accurate
  • License file is included

Testing deliverables prevents embarrassing back-and-forth after handoff.

Version Control and Updates

Icon sets evolve over time. Maintain version control to track changes:

  • Use semantic versioning (1.0.0, 1.1.0, 2.0.0)
  • Document what changed in each version
  • Consider how updates affect existing implementations
  • Provide migration notes for breaking changes

If clients will receive ongoing updates, establish a clear process for delivering and communicating changes.

Handling Revisions

Revision requests are normal. Handle them efficiently:

  • Keep source files organized so changes are quick
  • Understand the scope of revision before starting
  • Communicate timeline for revisions clearly
  • Document what changed in the revision
  • Deliver only changed files, clearly labeled

Clear communication during revisions prevents scope creep and keeps projects on track.

Archiving Projects

After delivery, archive the complete project:

  • Keep all source files in their final state
  • Save a copy of what was delivered
  • Note any special requirements or decisions
  • Store client communication about specifications

Good archives make future updates possible even months or years later.

Frequently Asked Questions

Related Articles