iOS Assets & App Icons

iOS Assets and App Icons

Every beautiful application relies on high-quality visual assets.

Instead of scattering images throughout your project folder, Xcode provides the Asset Catalog (Assets.xcassets).

The Asset Catalog compiles all your images, colors, and icons into a highly optimized binary format when your app is built.

Vector vs Raster Assets

Historically, developers had to provide three different versions of every single image: @1x, @2x, and @3x.

This ensured the image looked crisp on standard, Retina, and Super Retina screens.

Modern iOS development encourages using Vector Assets (PDF or SVG format).

You only provide a single SVG file, and Xcode automatically scales it flawlessly to fit any screen resolution perfectly without pixelation!

App Icons

Your App Icon is the face of your application. It represents your app on the Home Screen, in the App Store, and in Spotlight Search.

Apple is incredibly strict about App Icons. They must be perfectly square and contain no transparency (no alpha channel).

The iOS operating system will automatically apply the famous "rounded rectangle" clipping mask to your square icon.

In Xcode 14 and newer, you only need to provide a single 1024x1024 App Icon image. Xcode takes care of scaling it down for the Settings app and Notifications!

Accent Colors and Themes

The Asset Catalog is not just for images. You can also define custom Colors.

You can define a color named "BrandBlue" and assign it a bright blue hex code for Light Mode, and a slightly darker blue hex code for Dark Mode.

You can then use this color anywhere in SwiftUI effortlessly!

import SwiftUI

struct BrandView: View {
    var body: some View {
        Text("Welcome")
            // SwiftUI automatically searches the Asset Catalog for "BrandBlue"
            .foregroundColor(Color("BrandBlue"))
    }
}

SF Symbols

Before you spend hours designing custom icons for a back button or a settings gear, you should explore SF Symbols.

SF Symbols is an incredible library of over 5,000 highly configurable icons designed by Apple, built directly into the operating system.

You don't need to add them to your Asset Catalog; you just call them by name!

struct IconView: View {
    var body: some View {
        // Fetches a native Apple icon automatically
        Image(systemName: "gearshape.fill")
            .font(.largeTitle)
            .foregroundColor(.blue)
    }
}