Assets catalogs are super useful to organize your app’s assets in Xcode. Drop graphics, images, icons, colors and vectors into an asset catalog and use them directly in your app’s code.
In this tutorial, we’re going to discuss:
Ready? Let’s go.
An asset catalog, simply put, is a single folder in Xcode that you use to organize your app’s images, icons, colors, and more. Instead of adding individual images to Xcode’s file organizer, you add assets neatly organized in a single catalog. Asset catalogs also include metadata, for example about image scale.
Here’s an example Assets.xcassets asset catalog in an Xcode project:
An app project in Xcode has one default .xcassets catalog by default, which you can find in the Project Navigator on the left of Xcode. When you open it, you see the following UIs:
The most common asset types in a run-of-the-mill app project are:
1x, 2x, etc. image scalesWhat are advantages of using a asset catalog in your app project?
Color("green") and Image("logo"), which is super convenient. You can even use image and color literals in Xcode’s editor, so icons and colors show up as inline images.1x images. This reduces the app download and subsequent storage size.Let’s find out more about the specifics of assets in Xcode!
An .xcassets file is, in fact, a folder inside your Xcode project’s root folder. Assets are stored in subfolders and metadata is stored in JSON files. That’s all quite compatible with version control tools like Git. Neat!
The most common assets you’ll find in an asset catalog are, of course, images! You use them for all sorts of things: photos, icons, graphics, vectors, and so on. Anything that’s pixely and cannot be drawn with graphics code alone, is probably going to be a PNG or JPG image file.
Adding an image to an asset catalog is as simple as dragging it from Finder to Xcode. Like this:
Once you’ve added an image to the asset catalog, you can use ’em in your code like this:
// UIKit
imageView.image = UIImage(named: "lolcatz")
// SwiftUI
Image("lolcatz")
Simple, right? An advantage of working with the default asset catalog in Xcode is that you can reference the name of the asset directly in your code. You don’t need to load a bundle, read from a file or work with filepaths.
If you look closely at the above screenshot, you’ll see that we’re actually dragging 3 files from Finder to Xcode. What’s up with that? It’s because of different iPhone screen sizes, in short.
Different iPhone models have a different absolute screen sizes and resolutions, which results in a distinct pixels-per-inch (PPI) for that iPhone. When you can fit more pixels in the same “physical” space, you need bigger images. You provide those images in your iOS app through Xcode, with the filename@2x.png and filename@3x.png file naming convention.
By the way, the App Icon asset in the Assets.xcassets file looks complicated, but it’s just an image. The difference with an ordinary image asset is that the app icon contains images with lots of different sizes. Each size corresponds to a specific iPhone/iPad model and use case, like @3x for an iPhone notification icon. When you’re configuring your app’s icon, just export the image file to the different sizes (or use a template), drag-and-drop them into the appropriate slots, and you’re done.
You can learn more about image scaling and pixels vs. points in this tutorial: 1x, 2x and 3x Image Scaling on iOS Explained
You generally use 1 of 3 image file types in your iOS app:
If you want to keep the download and storage size of your app small, it’s smart to use a tool like ImageOptim to optimize your images prior to importing them into Xcode. You can drastically reduce the size of your image asset files, depending on the settings you choose.
Awesome! Let’s get back to the asset catalog, and discuss color assets next.
Author’s Note: You can also add PDFs (scale-independent) to your app’s asset catalog in Xcode, but there’s no need for that anymore now that SVG is here.
An underappreciated feature of Xcode asset catalogs is the ability to add colors directly to the catalog. You can define RGB colors and use them in your app by name, just like you would an image.
Here’s how that works:
How do you use the color in your app? Here’s how:
// SwiftUI
Text("So long and thanks for all the fish").foregroundColor(Color("mint"))
// UIKit
textLabel.textColor = UIColor(named: "mint")
A few things to keep in mind:
Working with colors via the Xcode asset catalog has another interesting benefit: you can automatically add colors to support Dark Mode. Here’s how that works:
One of the cool things about this setting is that it changes the colors in your app effortlessly between Dark and Light modes. If you use the color name consistently in your app, you should be able to adopt Dark Mode with almost zero effort.
This same Appearances setting also works for images, of course. You can specify which image file to use when, i.e. use a specific image for Dark Mode.
Awesome! Now you know how useful asset catalogs in Xcode are. You can store all sorts of things in them: images, colors, metadata, and much more. Here’s what we discussed:
Want to learn more? Check out these resources:
