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
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.
Steps to use SVG as the app icon
- 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.svgfile in Visual Studio-> Build Action-> SharedImage
- Then right click on your core project directory again-> Edit Project File, and update the SharedImage line containing
<SharedImage Include=”appicon.svg” IsAppIcon=”true” ForegroundFile=”foreground.svg” ForegroundScale=”1.5" />.
- 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
Assets.xcassets/appicon.appiconset. I was able to completely get rid of the original
Media/Assets.xcassetsfile 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?
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.
- 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!