.NET MAUI App Icon Sizing – One way to rule them all

Have you been struggling with SVG images that won’t size correctly as app icons across different platforms in your .NET MAUI app? Even after following the documentation, adjusting the ForegroundScale, modifying SVGs, and tweaking resizing options, your icon still appears too small on Android? If so, keep reading—I’ll help ease your frustration with .NET MAUI App Icon Sizing. This post will focus on Android and iOS, though the same approach can be applied to any platform.

Setting Up Your Source Files

First, let us take a look at the source files as created from the Visual Studio default MAUI template. Under your Resources/AppIcon folder, delete the existing images from your project. This will also trigger a change in your .csproj-file, but we will address that later. Next, add your own background (appicon.svg) and foreground (appicon_default.svg) images by right-clicking the AppIcon folder and selecting Add > Existing Item… These will be your default values for all platforms. Next, add your platform-specific foreground images for Android (appicon_android.svg) and iOS (appicon_ios.svg). The content filenames should only contain lowercase letters and underscores. To achieve a similar foreground size on Android, you’ll need to scale down the content in your SVG by 0.65. My foreground images look like this:

Android: iOS:

An important detail to note is the BuildAction setting for each SVG file. The ‹appicon.svg› and ‹appicon_default.svg› files should have their BuildAction set to MauiIcon, while ‹appicon_android.svg› and ‹appicon_ios.svg› should be set to None. This is because you can’t have multiple foreground or background images set as MauiIcon in your project. It may not seem logical, but it works!

Configuring Your Project File

Now double-click your project file from your Solution Explorer and go to the ItemGroup containing resources definitions like Icon, Splash, etc. Here you define your platformspecific icons:

<ItemGroup>
    <!-- App Icon -->
    <MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'" I
              nclude="Resources\AppIcon\appicon.svg" 
              ForegroundFile="Resources\AppIcon\appicon_ios.svg" />
    <MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'" 
              Include="Resources\AppIcon\appicon.svg" 
              ForegroundFile="Resources\AppIcon\appicon_android.svg" />
    <MauiIcon Include="Resources\AppIcon\appicon_default.svg" />
    
    <!-- Splash Screen -->
    <MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />

    <!-- Images -->
    <MauiImage Include="Resources\Images\*" />
    <MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185" />

    <!-- Custom Fonts -->
    <MauiFont Include="Resources\Fonts\*" />

    <!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
    <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>

The MauiIcon attribute lets us set different icons for iOS and Android, while the Condition attribute checks the current TargetFramework to include the correct app icon. In my opinion, this is the proper way to handle .NET MAUI app icon sizing.

Summary

Here’s how it will appear on your mobile device screen:

Android:   iOS: