Using SVG files as App Icons in iOS & Android Xamarin apps

We all love the ResizetizerNT library that allows you to use SVG files as images in the app, but wouldn’t it be amazing if could also automatically generated all the needed files for iOS & Android app icons in all the right locations during build time, including the Android adaptive and round icons? Well, this undocumented gem was hiding right in front of your eyes!

Created by Xamarin.Forms/MAUI Engineering Manager Jonathan Dick, at first I didn’t think it was completely supported because of no official article/documentation. But tired of generating new app icons for the infinity-eth time, despite the simple Python script we created 2.5 years ago, we decided to procrastinate (again) and reverse engineer the source code in the GitHub repo to figure this out, and share it so we can all save time collectively.

Prep your SVG

First you will need the to split your app icon into two SVG’s of size 1024x1024, the background called appicon.svg and the foreground with a transparent background called foreground.svg. It’s easy to do this using a free website like Figma, just make two copies of the original SVG, and edit one with only the background and for the other, delete the background layer from the original SVG.

Split your icon to foreground and appicon and export the two as SVG files

Steps to use SVG as the app icon

Search and then add the ResizetizerNT nuget package
Add the SVG’s to the project. Edit Project File after changing Build Action
  • If you haven’t already, add the ResizetizerNT Nuget package to your Core and Platform specific projects.
  • Then add your foreground and appicon SVG files to your Core/Shared project, by right clicking on the Core project->Add->Existing Files->Select the SVG
  • Then right click on the added appicon.svg file in Visual Studio-> Build Action-> SharedImage
  • Then right click on your core project directory again-> Edit Project File, and update the SharedImage line containing appicon to this <SharedImage Include=”appicon.svg” IsAppIcon=”true” ForegroundFile=”foreground.svg” ForegroundScale=”1.5" />.
Change Build Action to SharedImage
Info.plist file showing XSAppIconAssets value that was changed
  • Android — If your icon is set in your AndroidManifest.xml file, then change/add these values in the application tag: android:icon= "@mipmap/appicon" android:roundIcon= "@mipmap/appicon_round". If your icon isn’t set there, you’ll have to make the change in your main Activity file. Now, you should be able to delete all your older icon files. You might have to change the icon size in foreground.svg to properly generate the icon.
  • iOS —Go to Info.plist of the iOS project and change the XSAppIconAssets value to Assets.xcassets/appicon.appiconset. I was able to completely get rid of the original Media/Assets.xcassets file since there was nothing else there as I use ResizetizerNT for everything. Make sure the older icons are deleted and so are the references from the iOS project’s CSPROJ file.
App Icon Change is Successful!

Depending on your build settings, you might need to do a Clean All, and delete any previously installed apps. Now test your apps and you will see that the new app icons appear!

Can’t be that easy, what’s the catch?

Images: Left is original, Right is foreground that required size shrinking

The ForegroundScale property only works for iOS, not Android. Due to that and some nuances with my SVG icon, for it to fit properly in the round icon, I had to reduce the size of my foreground icon more. There was some trial and error to figure out the final size (right of image), but once I figured the right size, I was able to use the ForegroundScale to just fix up the look of the iOS app.

I would recommend testing it on a device/emulator with round icons (like Google Pixel), as fitting within the round icon generally means the trick will work with other adaptive icons as well.

Other observations

Non hex values for color need to be changed
  • For some reason, my SVG file had color names for “white” and “black”, so I first needed to change them to their hex values to work with the library.
Parts of SVG that needed to be removed
  • SVG containing tags like filter="url.. or a “defs” section, are not supported by the library, there are ways of getting rid of them from your SVG
  • It took me sometime to figure this out, but I ended up using a trick John once shared to debug assets: Right click on the Solution in the solution explorer -> Display Options -> Show all files. Then in the platform specific project, go through the obj folder to see what files are generated
  • Feel free to reach out to me with questions on Twitter or Linkedin, and check out our portfolio! Also, try our free, no ads, open-source puzzle game called NumberBomb on iOS & Android!
Video Recording going through the steps needed to use the SVG

--

--

--

Developers building things, on here to share knowledge. Featured blog for PlanetXamarin.com github.com/saamerm linkedin.com/in/saamer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Into Docker

Automated Reader — Reading Printed Text Out Loud

5 Simple Git Commands You Should Learn.

My Internship Goals

From music to coding, Marty lands dream job at Deltatre

Demystifying Let’s Encrypt

What if you could make git commit in past with time travel?

AWS High Availability using an Auto Scaling Group

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
The First Prototype

The First Prototype

Developers building things, on here to share knowledge. Featured blog for PlanetXamarin.com github.com/saamerm linkedin.com/in/saamer

More from Medium

How can enable Lint and why?

Getting started: Xamarin.Native vs Xamarin.Forms/MAUI for iOS & Android

How To: SVG as an iOS image asset in Xamarin!

JavaScript to Xamarin.Forms Two Way Communication Setup