Find all available images for Image(systemName:)
Asked Answered
W

9

195

Where can I find all the system images that are available in the initializer Image(systemName:)?

I've only been using "chevron" and "star.fill" so far, as discovered in Apple's SwiftUI tutorial series. However, I haven't been able to find a full list of icons in any official documentation.

Wagtail answered 9/6, 2019 at 13:31 Comment(3)
You can download the full kit from the developer portalShaunta
Look here, it´s in the Apple guide lines for SF symbols: developer.apple.com/design/human-interface-guidelines/…Hadria
I searched all through those documents looking for "star.fill" and found nothing. Where are these listed? I can open FontBook and scroll through pages of symbols under SF Pro Display (for example), but I don't see "star.fill" and if you want to use one of those symbols - how??Negligible
S
248

These icons are called SF Symbols. There are over 3,300 symbols you can use in iOS 13 and later, macOS 11 and later, watchOS 6 and later, and tvOS 13 and later. You can use a symbol everywhere you can use an image.

To browse the full set of symbols, download the SF Symbols app. For more info about SF Symbols check here.

History of SF Symbols updates:


SF Symbols 2 introduces over 750 new symbols and includes:

  • Over 150 preconfigured, multicolor symbols that automatically adapt to vibrancy, accessibility settings, and appearance modes
  • Negative side margins in both standard and custom symbols, giving you greater control over horizontal alignment
  • Localized symbol variants for right-to-left writing systems, as well as script-specific symbols for Arabic, Devanagari, and Hebrew

SF Symbols 3 features over 600 new symbols, enhanced color customization, a new inspector, and improved support for custom symbols.


SF Symbols 4 features over 1000 new symbols, variable color, automatic rendering, and new unified layer annotation. These new symbols are available in apps running iOS 16, iPadOS 16, macOS 13, tvOS 16, and watchOS 9.


Usage

UIKit:

let heartImage = UIImage(systemName: "heart.fill")

SwiftUI:

let heartImage = Image(systemName: "heart.fill")
Stupor answered 9/6, 2019 at 13:52 Comment(2)
Thank you, but your link is for the old version, it was missing one symbol from an Apple tutorial I was using (paintpalette). Current version (2.1) here: developer.apple.com/sf-symbolsSlider
Typical Apple, you have to use their app to do it...Hydro
C
117

The App by 

Apple has a dedicated App for this called SF Symbols. You can download the latest version from here to browse the full set of symbols.

Preview


Xcode 14

You can preview all symbols right from the Xcode app using the Library.

command + shift + L

Library


Important Note

You should always stay with the app to have new symbols available for Preview, Export and enjoy. The export option is only available from the SF Symbols app.


Backward compatibility.

If you need to use new symbols like the new multi-color ones that introduced in SF Symbols 2.0 for iOS 14 and above, you can export them using the app itself and import them as assets in the project. Step 1 and 2 of this answer shows how you can export symbols to use it for older iOS versions

Callus answered 4/7, 2020 at 16:4 Comment(3)
Thanks for this. It's ridiculous that this app is not available in the Mac App store, or delivered as part of Xcode.Pogy
@GregBrown it will be available (partially) from the Xcode 14Callus
I don't have that right tab (Symbols) on the Library...Illustrator
E
19

You can use SF Symbol Images in SwiftUI

Image(systemName: "person")

Download Link : https://developer.apple.com/design/resources/

Epigram answered 30/8, 2019 at 13:25 Comment(3)
Most applications do not use these symbols. That may be the reason.Epigram
Apple provides them and having standard images across apps makes it easier for users when they recognize familiar symbols. I just think it would be more Apple-like to provide them.Negligible
The SF Symbols app is free and made by Apple, not by a third-party. It is for designers too, not just developers.Haemo
A
18

Assuming you have Xcode installed, you can also preview all the images without needing to download a separate app.

The trick is you need to view them in a Storyboard, not a SwiftUI Canvas.

Add a UIImageView to your storyboard, then press the dropdown arrow near Image. You'll see the entire list of images provided by Apple:

enter image description here

Copy the name of an image, and then use it just like other answers mention above:

Image(systemName: "square.and.arrow.up")
Acarid answered 16/12, 2019 at 22:14 Comment(2)
And then? How will we use them in SwiftUI?Siderite
in SwiftUI you use it as in the statement above: Image(systemName: "SystemImageName")Cherokee
R
13

Slightly quicker and easier variant of Sensesful's answer:

When in storyboard view, click the add button at the top of the screen. If you click the image icon in the dialog that opens, you can scroll through all system icons. You can then use them by referncing the icon name in UIImage(systemName: iconName).

Screenshot of system icons list

Tested in Xcode 12.5.

Reddy answered 18/5, 2021 at 13:25 Comment(0)
K
9

Take a look at this Swift Package SFSafeSymbols

You can access all the SF Symbols from an enum

static func getRandomSFSymbol() -> SFSymbol {
    return SFSymbol.allCases.randomElement() ?? SFSymbol.xCircle
}
Kalidasa answered 30/8, 2020 at 1:55 Comment(4)
I'm seeking the way to do the same in the versions below iOS 13.0, so SFSafeSymbols did not helpedFlacon
SF Symbols aren’t available in iOS 12 and below. What you will have to do is take that enum from the library I mentioned and then you will have to join it with an array image names where the images are the SF Symbols you export as images. For even better results you can export the symbols as SVGKalidasa
Thank you. I tried to copy SF Symbol into the string and add it directly into Label or Button - without success. At the end - exported to PDF and inserted as vector image - it helped.Flacon
Yeah the code and font symbols actually don't exist on iOS 12 and below.. So you can't get them from the OS. You have to provide themKalidasa
N
3

You can also found all names here:

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

Nicaea answered 9/6, 2019 at 13:31 Comment(0)
A
2

I thought you could do it in xcode, but Apple recommends downloading https://developer.apple.com/sf-symbols/

With over 3,300 symbols, SF Symbols is a library of iconography designed to integrate seamlessly with San Francisco, the system font for Apple platforms.

Attain answered 23/12, 2021 at 5:6 Comment(0)
S
-1

SF Symbols is the system icon framework in iOS 13+.

We can find complete icon list at:

https://sfsymbols.com

Unfortunately the site is NOT allowed by Apple  license, to show and/or preview the images directly, but the keywords there are all we need to generate our own list with preview (at least all someone-like-me needs).

WARNING: SF-Symbols have strange usage rules, and anyone worried, should simply find another free icon alternative.

Like: https://github.com/google/material-design-icons
Or: https://github.com/jossef/material-design-icons-iconfont
(with Apache 2.0 license, without any attribution need)

Slam answered 27/11, 2021 at 4:37 Comment(5)
Why use this instead of the official Apple-provided app?Pogy
@GregBrown For example, someone may only have debug permission on the iPhone (like me at time of writting), or have not access to iOS device entirly.Slam
Either way, I recommend developing international Apps, with international assets.Slam
@GregBrown In other words, don't ever use things with strange license limitations (and search for Apache or MIT licensed assets, like we did).Slam
@GregBrown I can think of a number of reasons, mainly ease of access, and quickness, but unfortunately as it states in the answer it is not within the license terms of apple to ease the life of developers, just pretend they're cool.Shushan

© 2022 - 2024 — McMap. All rights reserved.