androidiosicons

What is the best way of converting a svg into App Icons for both iOS and Android


I'm looking for a tool that can generate the different sizes of icons for the iOS and Android apps from a svg image.

Google hasn't been really able to provide me with any "one-click" solution. Are there any tools out there which are less well known? or perhaps some simple batch scripts that achieve the same?

Ideally something I could run on my windows 10 machine, but linux would work too.


Solution

  • My choice is https://github.com/sterlp/svg2png. For IOS:

    java -jar svg2png.jar -f app_icon.svg -o yourFolder/Assets.xcassets/AppIcon.appiconset -c ios_icon.json
    

    With ios_icon.json like that:

    {
      "files": [
        {
          "nameSuffix": "-20x20@1x",
          "height": 20,
          "width": 20
        },
        {
          "nameSuffix": "-20x20@2x",
          "height": 40,
          "width": 40
        },
        {
          "nameSuffix": "-20x20@3x",
          "height": 60,
          "width": 60
        },
        {
          "nameSuffix": "-29x29@1x",
          "height": 29,
          "width": 29
        },
        {
          "nameSuffix": "-29x29@2x",
          "height": 58,
          "width": 58
        },
        {
          "nameSuffix": "-29x29@3x",
          "height": 87,
          "width": 87
        },
        {
          "nameSuffix": "-40x40@1x",
          "height": 40,
          "width": 40
        },
        {
          "nameSuffix": "-40x40@2x",
          "height": 80,
          "width": 80
        },
        {
          "nameSuffix": "-40x40@3x",
          "height": 120,
          "width": 120
        },
        {
          "nameSuffix": "-60x60@2x",
          "height": 120,
          "width": 120
        },
        {
          "nameSuffix": "-60x60@3x",
          "height": 180,
          "width": 180
        },
        {
          "nameSuffix": "-76x76@1x",
          "height": 76,
          "width": 76
        },
        {
          "nameSuffix": "-76x76@2x",
          "height": 152,
          "width": 152
        },
        {
          "nameSuffix": "-83.5x83.5@2x",
          "height": 167,
          "width": 167
        },
        {
          "nameSuffix": "-1024x1024@1x",
          "height": 1024,
          "width": 1024
        }
      ]
    }
    

    Just make sure generated png files match your configuration from AppIcon.appiconset/Contents.json. Mine is

    {
      "images" : [
        {
          "idiom" : "iphone",
          "scale" : "2x",
          "size" : "20x20",
          "filename" : "app_icon-20x20@2x.png"
        },
        {
          "idiom" : "iphone",
          "scale" : "3x",
          "size" : "20x20",
          "filename" : "app_icon-20x20@3x.png"
        },
        {
          "idiom" : "iphone",
          "scale" : "2x",
          "size" : "29x29",
          "filename" : "app_icon-29x29@2x.png"
        },
        {
          "idiom" : "iphone",
          "scale" : "3x",
          "size" : "29x29",
          "filename" : "app_icon-29x29@3x.png"
        },
        {
          "idiom" : "iphone",
          "scale" : "2x",
          "size" : "40x40",
          "filename" : "app_icon-40x40@2x.png"
        },
        {
          "idiom" : "iphone",
          "scale" : "3x",
          "size" : "40x40",
          "filename" : "app_icon-40x40@3x.png"
        },
        {
          "idiom" : "iphone",
          "scale" : "2x",
          "size" : "60x60",
          "filename" : "app_icon-60x60@2x.png"
        },
        {
          "idiom" : "iphone",
          "scale" : "3x",
          "size" : "60x60",
          "filename" : "app_icon-60x60@3x.png"
        },
        {
          "idiom" : "ipad",
          "scale" : "1x",
          "size" : "20x20",
          "filename" : "app_icon-20x20@1x.png"
        },
        {
          "idiom" : "ipad",
          "scale" : "2x",
          "size" : "20x20",
          "filename" : "app_icon-20x20@2x.png"
        },
        {
          "idiom" : "ipad",
          "scale" : "1x",
          "size" : "29x29",
          "filename" : "app_icon-29x29@1x.png"
        },
        {
          "idiom" : "ipad",
          "scale" : "2x",
          "size" : "29x29",
          "filename" : "app_icon-29x29@2x.png"
        },
        {
          "idiom" : "ipad",
          "scale" : "1x",
          "size" : "40x40",
          "filename" : "app_icon-40x40@1x.png"
        },
        {
          "idiom" : "ipad",
          "scale" : "2x",
          "size" : "40x40",
          "filename" : "app_icon-40x40@2x.png"
        },
        {
          "idiom" : "ipad",
          "scale" : "1x",
          "size" : "76x76",
          "filename" : "app_icon-76x76@1x.png"
        },
        {
          "idiom" : "ipad",
          "scale" : "2x",
          "size" : "76x76",
          "filename" : "app_icon-76x76@2x.png"
        },
        {
          "idiom" : "ipad",
          "scale" : "2x",
          "size" : "83.5x83.5",
          "filename" : "app_icon-83.5x83.5@2x.png"
        },
        {
          "idiom" : "ios-marketing",
          "scale" : "1x",
          "size" : "1024x1024",
          "filename" : "app_icon-1024x1024@1x.png"
        }
      ],
      "info" : {
        "author" : "xcode",
        "version" : 1
      }
    }
    

    For Android please refer to README on https://github.com/sterlp/svg2png or create your own json config.