"}],"short_description":"Learn how to incorporate Apple\u2019s SF Symbols\u00ae into apps built with the Swift Maps SDK and the benefits of doing so.","flexible_content":[{"acf_fc_layout":"content","content":"Want to know a Swift Maps SDK secret? The Swift Maps SDK supports showing Apple\u2019s SF Symbols\u00ae\u00a0on maps! Read on to learn the benefits of incorporating SF Symbols into apps built with the Swift Maps SDK by looking at what SF Symbols are, how to improve your iOS development experience, and how you can build visually beautiful iOS apps.<\/p>\n"},{"acf_fc_layout":"content","content":"
Maps and symbols go together like mac and cheese \u2013 they\u2019re a perfect combination and enhance each other\u2019s properties. Symbology plays an important role in GIS as symbols<\/a> can express meanings through images, color, and size. Most, if not all, maps will incorporate symbology in some way.<\/p>\n The most basic symbols you may see are dots to represent cities and stars to emphasize capitals. Consider how your local weather presenter might present the forecast. They stand in front of a map with images of clouds or suns, and you instantly know what kind of weather to expect for the day. Symbols convey messages that can bypass any language barriers.<\/p>\n With the Swift Maps SDK, it\u2019s easy to display maps<\/a> containing symbol-rich cartography authored using e.g. ArcGIS Pro desktop app or an ArcGIS Map Viewer web app. But sometimes, you want to programmatically add additional custom symbols<\/a> to the map on your app or change the original symbology of a data layer on the map. You can do this easily with the Swift Maps SDK, let\u2019s look at how using Apple\u2019s SF Symbols as an example.<\/p>\n"},{"acf_fc_layout":"content","content":" The Swift Maps SDK offers a number of predefined simple 2D and 3D symbols<\/a> (e.g. circles, diamonds, cubes, and more), as well as support for advanced symbols using the multilayer symbols<\/a> API or style files (.stylx) created from ArcGIS Pro. To take your customization even further, you can import your own images as e.g. JPEG, PNG format, and create symbols from them using the picture marker symbol<\/a> API. There are endless possibilities, but the hardest part about symbology is curating symbols that look good and fit your needs. An easy approach when developing iOS applications is to use Apple\u2019s SF Symbols which are compatible with the Swift Maps SDK.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2208202,"id":2208202,"title":"sf-symbol-app","filename":"sf-symbol-app.png","filesize":251313,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/sf-symbol-app.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-swift\/developers\/how-to-use-sf-symbols-in-your-arcgis-maps-sdk-for-swift-app\/sf-symbol-app","alt":"Apple's SF Symbols app","author":"350422","description":"","caption":"Apple\u2019s SF Symbols app lets developers explore thousands of symbols and preview customizations.","name":"sf-symbol-app","status":"inherit","uploaded_to":2208182,"date":"2023-12-20 23:08:54","modified":"2023-12-20 23:09:49","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1142,"height":836,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/sf-symbol-app-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/sf-symbol-app.png","medium-width":357,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/sf-symbol-app.png","medium_large-width":768,"medium_large-height":562,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/sf-symbol-app.png","large-width":1142,"large-height":836,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/sf-symbol-app.png","1536x1536-width":1142,"1536x1536-height":836,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/sf-symbol-app.png","2048x2048-width":1142,"2048x2048-height":836,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/sf-symbol-app-635x465.png","card_image-width":635,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/sf-symbol-app.png","wide_image-width":1142,"wide_image-height":836}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" SF Symbols<\/a> are vector-based images created for iOS apps, provided to developers by Apple. The \u201cSF” in SF Symbols refers to the San Francisco system font used by Apple platforms. In Apple\u2019s words, SF Symbols are \u201ca library of iconography designed to integrate seamlessly with San Francisco.\u201d The symbols are customizable in color, size, and weight. Developers are encouraged to use these in their iOS apps. You can download<\/a> the SF Symbols app to browse the thousands of symbols that are offered.<\/p>\n Note: the library does contain copyrighted symbols and there are limitations on their use – check the SF Symbols documentation for more information<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":" Symbols are used to indicate an action or to convey a message. You can find good examples of SF Symbols in any iOS app built by Apple. The Apple News app is a good example of using SF Symbols in a toolbar alongside text to indicate the active tab in an app. In some cases, text isn\u2019t even necessary. For example, users can infer what action a trash can symbol represents. Additionally, SF Symbols vary in color and size. Adjusting the colors is easy using the system colors. And because SF Symbols are vector-based, the images can scale without losing quality.<\/p>\n You can also use symbols to represent a large data set. Thinking again of our local weather forecast, clouds and suns symbolize the weather data. Because we may use a variety of symbols in one app, it is important that the symbols have a consistent theme or font. Utilizing SF Symbols can make your apps look more cohesive.<\/p>\n Speaking of cohesion, iOS developers know how important it is to incorporate a consistent, clean Apple \u201clook\u201d to their apps. Apple is known for upholding a certain \u201clook\u201d to all their products and encourages their developers do the same. Apps that adhere to the same standards exude a sense of professionalism and blend seamlessly with the iOS environment. Incorporating SF Symbols in your apps can help you achieve that Apple look with minimal effort.<\/p>\n"},{"acf_fc_layout":"content","content":" We\u2019re ready to symbolize! Let\u2019s create a Swift Maps SDK app that shows the start of a hiking trail in Malibu, California, using the Display a map tutorial app<\/a>. This app simply displays a map with an existing basemap style and using this project as a starting point, all we need to do is add a single symbol on top of the basemap.<\/p>\n Symbols are only attributes of graphics<\/a> or renderers. To display symbols, the first step is to add a graphics overlay<\/a>. A graphics overlay allows you to add graphics to a layer which is then overlaid on top of the map.<\/p>\n Choose an SF Symbol from the library that is suitable for your needs; in this case, we\u2019ve selected the \u201cfigure.walk.circle.fill\u201d symbol. Once you\u2019ve selected an SF Symbol, create a UIImage using its system name. The name must match exactly as it appears in the SF Symbol app, so the compiler knows which symbol to use.<\/p>\n Next, create a PictureMarkerSymbol<\/a> using the UIImage. The PictureMarkerSymbol class uses an image to symbolize graphics and features that have point or multipoint geometry. Note: PictureMarkerSymbols do not support GIFs nor can they detect theme changes; therefore, SF Symbols cannot be animated and changing the app\u2019s light and dark appearance will have no effect.<\/p>\n Create a point to use as the location for the symbol.<\/p>\n Create a graphic using the point and PictureMarkerSymbol.<\/p>\n Lastly, add the Graphic to the graphics overlay. Now we know where to go for a fun hike in Malibu. How easy was that?<\/p>\n There is of course more than one hiking trail in Malibu. Let\u2019s try adding multiple symbols at once to multiple points, using a data layer. A feature layer<\/a> contains a dataset that can be visualized by a renderer<\/a> which contains a set of symbols. This feature layer contains data of multiple trailheads in Malibu, California. Plain circles on a map would do the job but using the \u201cfigure.walk.circle.fill\u201d SF Symbol helps convey the message that these points are trailheads. The Add a feature layer tutorial app<\/a> displays the Malibu trailhead feature layer on top of a map. Using this app as a starting point, all we need to do is add a renderer.<\/p>\n To create a feature layer renderer, make a UIImage of the SF Symbol you want to display. We\u2019re still using the \u201cfigure.walk.circle.fill\u201d SF Symbol.<\/p>\n Using that image, create a PictureMarkerSymbol.<\/p>\n Lastly, create a SimpleRenderer<\/a> with that symbol and set it to the feature layer\u2019s renderer property. That\u2019s it! Creating multiple SF Symbols is just as easy as making just one symbol! Notice below the difference between using a default circle and an SF Symbol to indicate the trailheads.<\/p>\n What happens if you don\u2019t like the default style of SF Symbols? Just as you can customize the default Swift Maps SDK symbols, you can easily customize SF Symbols to your preference!<\/p>\n Open the SF Symbols app and ensure the Rendering Inspector panel is visible. Select your symbol and use the Rendering Inspector to preview different colors and rendering modes. We\u2019ve changed the palette rendering mode and used purple and cyan.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2208422,"id":2208422,"title":"customize-sf-symbol","filename":"customize-sf-symbol.png","filesize":252254,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-sf-symbol.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-swift\/developers\/how-to-use-sf-symbols-in-your-arcgis-maps-sdk-for-swift-app\/customize-sf-symbol","alt":"Screenshot of SF Symbols app with symbol customization.","author":"350422","description":"","caption":"Preview customizations made to the SF Symbol in the app.","name":"customize-sf-symbol","status":"inherit","uploaded_to":2208182,"date":"2023-12-21 01:49:34","modified":"2023-12-21 01:50:04","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1142,"height":836,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-sf-symbol-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-sf-symbol.png","medium-width":357,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-sf-symbol.png","medium_large-width":768,"medium_large-height":562,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-sf-symbol.png","large-width":1142,"large-height":836,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-sf-symbol.png","1536x1536-width":1142,"1536x1536-height":836,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-sf-symbol.png","2048x2048-width":1142,"2048x2048-height":836,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-sf-symbol-635x465.png","card_image-width":635,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-sf-symbol.png","wide_image-width":1142,"wide_image-height":836}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" Once you\u2019ve customized the symbol to your liking, take it to the code. Symbol configuration<\/a> is an object that contains the styling information that will be applied to the UIImage. Create a symbol configuration based off the settings in preview.<\/p>\n Create an image with the configuration or apply the configuration to an existing image. There you have it, a quick and simple way to stylize SF Symbols which you can then display in your Swift Maps SDK app!<\/p>\n The use of symbols in your Swift Maps SDK apps provide meaningful context and messaging to your users. By including SF Symbols (tools provided by Apple) in your app, you can use them to indicate actions or convey messages alongside text or just by themselves. The ArcGIS Maps SDK for Swift makes it easy to add customized symbols to your app by utilizing the PictureMarkerSymbol and Renderer classes. Doing so can save you time and help you create an app that users will be drawn to.<\/p>\n You can check out the code on my GitHub<\/a> to review the examples in this blog in depth. Once you\u2019re ready to try it out for yourself, you can create a developer account<\/a> for free and download ArcGIS Maps SDK for Swift<\/a> and get started with our tutorials and documentation. For more help with styling a feature layer, check out the tutorial<\/a>!<\/p>\n <\/p>\n"},{"acf_fc_layout":"content","content":" Credit Notice: SF Symbols is a registered trademark of Apple Inc.<\/em><\/p>\n"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/blog-thumbnail.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/blog-banner.png"},"yoast_head":"\nWhat are SF Symbols?<\/strong><\/h2>\n
How do SF Symbols benefit developers?<\/strong><\/h2>\n"},{"acf_fc_layout":"image","image":{"ID":2208252,"id":2208252,"title":"news-toolbar","filename":"news-toolbar.png","filesize":29862,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/news-toolbar.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-swift\/developers\/how-to-use-sf-symbols-in-your-arcgis-maps-sdk-for-swift-app\/news-toolbar","alt":"Clipped image of Apple's News app toolbar.","author":"350422","description":"","caption":"Apple's News app uses SF Symbols in the toolbar with text and various colors to indicate the active tab.","name":"news-toolbar","status":"inherit","uploaded_to":2208182,"date":"2023-12-21 00:55:08","modified":"2023-12-21 00:55:50","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1088,"height":140,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/news-toolbar-213x140.png","thumbnail-width":213,"thumbnail-height":140,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/news-toolbar.png","medium-width":464,"medium-height":60,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/news-toolbar.png","medium_large-width":768,"medium_large-height":99,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/news-toolbar.png","large-width":1088,"large-height":140,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/news-toolbar.png","1536x1536-width":1088,"1536x1536-height":140,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/news-toolbar.png","2048x2048-width":1088,"2048x2048-height":140,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/news-toolbar-826x106.png","card_image-width":826,"card_image-height":106,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/news-toolbar.png","wide_image-width":1088,"wide_image-height":140}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":2208262,"id":2208262,"title":"photos-toolbar","filename":"photos-toolbar.png","filesize":90154,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/photos-toolbar.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-swift\/developers\/how-to-use-sf-symbols-in-your-arcgis-maps-sdk-for-swift-app\/photos-toolbar","alt":"Clipped image of Apple's Photos app toolbar.","author":"350422","description":"","caption":"Apple's Photos app uses SF Symbols without labels. The meaning of each symbol is clear to the app\u2019s user thanks to well established and thoughtful iOS user interface conventions.","name":"photos-toolbar","status":"inherit","uploaded_to":2208182,"date":"2023-12-21 00:56:13","modified":"2023-12-21 00:56:45","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1088,"height":106,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/photos-toolbar-213x106.png","thumbnail-width":213,"thumbnail-height":106,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/photos-toolbar.png","medium-width":464,"medium-height":45,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/photos-toolbar.png","medium_large-width":768,"medium_large-height":75,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/photos-toolbar.png","large-width":1088,"large-height":106,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/photos-toolbar.png","1536x1536-width":1088,"1536x1536-height":106,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/photos-toolbar.png","2048x2048-width":1088,"2048x2048-height":106,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/photos-toolbar-826x80.png","card_image-width":826,"card_image-height":80,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/photos-toolbar.png","wide_image-width":1088,"wide_image-height":106}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
How to add SF Symbols to your Swift Maps SDK app <\/strong><\/h2>\n
Step 1: Add a GraphicsOverlay<\/strong><\/h3>\n
\/\/ `model` is an ObservableObject that contains a GraphicsOverlay.
\nMapView(map: map, graphicsOverlays: [model.graphicsOverlay])<\/code><\/p>\nStep 2: Create a UIImage from an SFSymbol<\/strong><\/h3>\n
let image = UIImage(systemName: \"figure.walk.circle.fill\")!<\/code><\/p>\nStep 3: Create a PictureMarkerSymbol<\/strong><\/h3>\n
let symbol = PictureMarkerSymbol(image: image)<\/code><\/p>\nStep 4: Create a point<\/strong><\/h3>\n
let point = Point(x: -118.806546, y: 34.020933, spatialReference: .wgs84)<\/code><\/p>\nStep 5: Create a graphic<\/strong><\/h3>\n
let graphic = Graphic(geometry: point, symbol: symbol)<\/code><\/p>\nStep 6: Add the graphic<\/strong><\/h3>\n
graphicsOverlay.addGraphic(graphic)<\/code><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2208362,"id":2208362,"title":"add-sf-symbol-app","filename":"add-sf-symbol-app-2.png","filesize":179684,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/add-sf-symbol-app-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-swift\/developers\/how-to-use-sf-symbols-in-your-arcgis-maps-sdk-for-swift-app\/add-sf-symbol-app-3","alt":"Screenshot of the Add an SF Symbol app.","author":"350422","description":"","caption":"The result of adding a single SF Symbol to the map.","name":"add-sf-symbol-app-3","status":"inherit","uploaded_to":2208182,"date":"2023-12-21 01:42:01","modified":"2023-12-21 01:42:23","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":250,"height":540,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/add-sf-symbol-app-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/add-sf-symbol-app-2.png","medium-width":121,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/add-sf-symbol-app-2.png","medium_large-width":250,"medium_large-height":540,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/add-sf-symbol-app-2.png","large-width":250,"large-height":540,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/add-sf-symbol-app-2.png","1536x1536-width":250,"1536x1536-height":540,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/add-sf-symbol-app-2.png","2048x2048-width":250,"2048x2048-height":540,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/add-sf-symbol-app-2-215x465.png","card_image-width":215,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/add-sf-symbol-app-2.png","wide_image-width":250,"wide_image-height":540}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Adding SF Symbols to a dataset <\/strong><\/h2>\n
Step 1: Create a UIImage<\/strong><\/h3>\n
let image = UIImage(systemName: \"figure.walk.circle.fill\")!<\/code><\/p>\nStep 2: Create a PictureMarkerSymbol<\/strong><\/h3>\n
let symbol = PictureMarkerSymbol(image: image)<\/code><\/p>\nStep 3:<\/strong> Create a SimpleRenderer<\/strong><\/h3>\n
featureLayer.renderer = SimpleRenderer(symbol: symbol)<\/code><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2211352,"id":2211352,"title":"before-after-renderer","filename":"before-after-renderer-1.png","filesize":1274275,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/before-after-renderer-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-swift\/developers\/how-to-use-sf-symbols-in-your-arcgis-maps-sdk-for-swift-app\/before-after-renderer-2","alt":"Screenshot of Display SF Symbols app before and after SF Symbols are applied.","author":"350422","description":"","caption":"Left: Displaying trailheads with red circle symbols. Right: Displaying trailheads with SF Symbols.","name":"before-after-renderer-2","status":"inherit","uploaded_to":2208182,"date":"2023-12-23 00:51:13","modified":"2023-12-23 00:52:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1000,"height":1000,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/before-after-renderer-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/before-after-renderer-1.png","medium-width":261,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/before-after-renderer-1.png","medium_large-width":768,"medium_large-height":768,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/before-after-renderer-1.png","large-width":1000,"large-height":1000,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/before-after-renderer-1.png","1536x1536-width":1000,"1536x1536-height":1000,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/before-after-renderer-1.png","2048x2048-width":1000,"2048x2048-height":1000,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/before-after-renderer-1-465x465.png","card_image-width":465,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/before-after-renderer-1.png","wide_image-width":1000,"wide_image-height":1000}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Customizing SF Symbols<\/strong><\/h2>\n
Step 1: Preview<\/strong><\/h3>\n
Step 2: Make a configuration<\/strong><\/h2>\n
var config = UIImage.SymbolConfiguration(paletteColors: [.systemPurple, .systemCyan])
\nconfig = config.applying(UIImage.SymbolConfiguration(font: .systemFont(ofSize: 30.0)))<\/code><\/p>\nStep 3: Apply the configuration<\/strong><\/h2>\n
\/\/ Creates the image with the configuration.
\nlet imageWithConfig = UIImage(systemName: \"figure.walk.circle.fill\", withConfiguration: config)!
\n\/\/ Applies the symbol to the configuration after.
\nlet appliedConfigImage = image.applyingSymbolConfiguration(config)!<\/code><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2208452,"id":2208452,"title":"customize-app","filename":"customize-app.png","filesize":267244,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-app.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sdk-swift\/developers\/how-to-use-sf-symbols-in-your-arcgis-maps-sdk-for-swift-app\/customize-app","alt":"Screenshot of Add SF Symbols with customization app.","author":"350422","description":"","caption":"Image of customized SF Symbols displayed on a map.","name":"customize-app","status":"inherit","uploaded_to":2208182,"date":"2023-12-21 01:55:04","modified":"2023-12-21 01:55:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":250,"height":540,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-app-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-app.png","medium-width":121,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-app.png","medium_large-width":250,"medium_large-height":540,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-app.png","large-width":250,"large-height":540,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-app.png","1536x1536-width":250,"1536x1536-height":540,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-app.png","2048x2048-width":250,"2048x2048-height":540,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-app-215x465.png","card_image-width":215,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/12\/customize-app.png","wide_image-width":250,"wide_image-height":540}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Summary<\/strong>\u00a0<\/strong><\/h2>\n