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

Using ResizetizerNT to generate all the tedious Xcassets, PNGs & XMLs files, including adaptive and round icons

5 min readDec 23, 2021

--

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" />.

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.

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.

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