SF Symbols and List Styles

Using SF Symbols 2 and the new list styles in iOS 14

In this section, you’ll learn how to work with SF Symbols. We’ll be adding multicolor icons to our app, it is a new icon category introduced by Apple with SF Symbols 2. In addition to this, we’ll also be adding a list layout.


To follow this course, you can download the source file, which will help you compare your progress.


Before we begin, please make sure to have the SF Symbols app downloaded. Provided below is the link to the app as well as a link to the Apple Developer app. The latter contains resources that you can use to stay updated.

Getting Started

Let’s start off by creating a new file.

SF Symbols

It’s time to finally work with SF Symbols.

Image(systemName: String)

Image(systemName: "paperplane.circle.fill")



Note: If you use font properties on the icon, you will not be able to use the multicolor option.



.font(.system(size: 34, weight: .light, design: .rounded))

Note: You’ll notice that the renderingMode modifier is no longer working. As mentioned above, that is because we’re using the font properties on the icon.


Let’s add in another layer of text beneath the existing one, this automatically creates a VStack.







// Image

VStack {




In this step, we’ll make the frame of the icon bigger and then, add some modifiers to it.


Now, let’s add in a Spacer to make sure that the elements take the full width. After the VStack, add in the Spacer as follows:



var body: some View {


List Layout

In this step, we’ll create a list layout. To do so:

List Styles

Here, we’ll apply some styles to the list.

.listStyle(List Style)