logoredraws.com

Convert an SVG Logo to ICNS

How to turn an SVG logo into a macOS ICNS icon: what changes in conversion, how to prepare the artwork, build the iconset, and check the finished file.

Published

Contents
  1. The short answer
  2. Vector artwork, embedded images and previews
  3. Rights to modify the logo
  4. What you need before you start
  5. Step 1: Prepare the SVG
  6. Step 2: Render the PNG sizes
  7. Step 3: Build the ICNS file
  8. When you may not need an ICNS
  9. Final inspection
  10. Limits of this guide

The short answer

You can't save an SVG directly as an ICNS file. You render the SVG logo to square PNG images at a set of pixel sizes and then package those images into an ICNS container. On macOS, Apple's command-line tool iconutil does the packaging. It turns a folder of correctly named PNGs, called an .iconset, into a single .icns file.

ICNS is the icon format macOS uses for app, folder and document icons. It holds several bitmap images of the same icon, each at a different resolution, so the system can pick the right one for the display size. It does not store vector paths. Converting from SVG is therefore a rasterization step. The ICNS will look as sharp as the PNGs you render. It cannot be edited as vector artwork afterward, so keep the original SVG as your master file.

Vector artwork, embedded images and previews

Check what the SVG actually contains before converting it. An .svg extension does not guarantee editable vector paths. Some SVG files are just a wrapper around an embedded PNG or JPEG, and some include a raster preview alongside the vectors. If the logo is an embedded bitmap, rendering it at 1024 pixels won't add detail. The large icon sizes will only be as good as that embedded image.

Open the file in a vector editor and look at the outline or wireframe view, or inspect the code. Path, circle, polygon and similar elements are true vectors. An image element with embedded data is a bitmap. If the logo is a bitmap, find a genuine vector version or plan the icon sizes around the resolution you have.

Being able to download a logo doesn't mean you may turn it into an app or file icon. Resizing it, padding it into a square or simplifying it for small sizes all count as modifying the artwork, and putting it on an app icon is a use of the trademark. If the logo isn't yours, confirm you have permission for both the modification and the intended use. Check any font licenses too, if the logo's lettering depends on a specific typeface.

What you need before you start

  • The logo as an SVG with real vector paths, ideally your master file rather than a re-export.
  • A square version of the artwork. ICNS images are square, so a wide or tall logo needs a square canvas with padding, or a compact mark such as a symbol or monogram.
  • An SVG renderer that can export PNG at exact pixel sizes, such as Inkscape, librsvg's rsvg-convert, or the export function of your vector editor.
  • A Mac with iconutil, which comes with macOS, to assemble the ICNS. Online converters are an alternative, but uploading unreleased or confidential brand artwork sends it to a third party.

Step 1: Prepare the SVG

Set the document to a square canvas so that its viewBox width and height are equal. Center the logo and leave some margin around it. If the canvas isn't square, some renderers will stretch the artwork when you ask for equal width and height, and others will crop it or leave uneven space. If the icon is for a macOS app, Apple's Human Interface Guidelines describe the expected icon shape and layout, so review them before deciding how the mark sits on the canvas.

Convert text to outlines. A renderer that can't find the logo's font will substitute another one, and the substitute gets baked into the PNGs. Converting text to paths avoids this. Keep an unconverted copy in case the wording needs editing later.

Check color and transparency. Areas without a background stay transparent in PNG, and iconutil keeps that transparency. If the logo is meant to sit on a solid tile, add the tile as a shape in the SVG. Filters, masks, blend modes and complex gradients can render differently from one program to another. Simplify them, or check the output closely, if the logo relies on them.

Consider a simplified version for the smallest sizes. Fine lines, small text and tight detail often become unreadable at 16 or 32 pixels. You can render those sizes from a simpler SVG variant and use the full logo for the larger ones. An iconset accepts different artwork per size.

Step 2: Render the PNG sizes

iconutil expects a folder whose name ends in .iconset and contains PNGs with specific file names. Each base size has a standard version and an @2x version at double the pixel dimensions for high-resolution displays.

File name | Pixel size
icon_16x16.png | 16 × 16
icon_16x16@2x.png | 32 × 32
icon_32x32.png | 32 × 32
icon_32x32@2x.png | 64 × 64
icon_128x128.png | 128 × 128
icon_128x128@2x.png | 256 × 256
icon_256x256.png | 256 × 256
icon_256x256@2x.png | 512 × 512
icon_512x512.png | 512 × 512
icon_512x512@2x.png | 1024 × 1024

Render every size directly from the SVG. Don't scale one PNG down to make the others, because rendering from vectors gives cleaner edges at each size. The script below shows one way to do this on a Mac, assuming rsvg-convert is installed (it ships with the librsvg package) and the SVG has a square canvas. Inkscape's command-line export or a batch export from your vector editor works just as well.

mkdir logo.iconset
for size in 16 32 128 256 512; do
  rsvg-convert -w $size -h $size logo.svg -o logo.iconset/icon_${size}x${size}.png
  double=$((size * 2))
  rsvg-convert -w $double -h $double logo.svg -o logo.iconset/icon_${size}x${size}@2x.png
done

If you made a simplified variant for small sizes, point the 16 and 32 pixel renders at that file instead.

Step 3: Build the ICNS file

With the iconset folder complete, run iconutil to pack it into a single ICNS file.

iconutil -c icns logo.iconset -o logo.icns

If iconutil reports an error, look for a misnamed file, a PNG with the wrong dimensions, or a folder name that doesn't end in .iconset.

When you may not need an ICNS

If the icon is for an app built in Xcode, the app icon is normally supplied through the project's asset catalog, and Xcode generates the icon resources at build time. In that case, export the PNG sizes the asset catalog asks for rather than building an ICNS by hand. A standalone ICNS is mainly useful for apps built with other toolchains, cross-platform frameworks that ask for one, or custom folder and file icons.

Final inspection

  • Open the ICNS in Preview. It lists each image stored in the file, so you can confirm every size is present and correctly drawn.
  • Look at the 16 and 32 pixel versions at actual size. Check that the mark is still recognizable and that thin strokes haven't vanished or blurred.
  • Check the large sizes for soft edges or pixelation. Either one usually means the source SVG contains an embedded bitmap rather than vector paths.
  • Confirm that transparent areas show as transparent, not as a white or black box.
  • Compare colors with the original SVG, especially gradients and any effects that rely on filters or blend modes.
  • To audit an existing ICNS, run iconutil -c iconset logo.icns to unpack it back into PNGs.

Limits of this guide

This guide covers the general conversion workflow and does not compare specific converter apps or online services, because no test results or quality comparisons were available to support that. Exact command options can change between versions of Inkscape, librsvg and macOS. Check the help output of the version you have installed. Current icon size and shape requirements for Mac apps are set by Apple's documentation and Xcode, so confirm them there before you ship an app icon.