Using Icons in Mobile Apps

Areas where the mobile application icon is used;

• In Apple and Google Store

• On your phone's home page

• In Spotlight search

• In your notifications and in the settings section,

• Some brands appear in their e-mails using application icons.

Although the mobile app icon is a shortcut to open the installed app, it is actually the first thing users encounter before deciding to install the app. A beautifully designed mobile app icon sets you apart from your competitors. You should upload your custom icon designs for your mobile applications that you developed in Kuika to our platform in Scalable Vector Graphics (svg) for ios and Extensible Markup Language (xml) format for android. In order for your mobile application icon to be published properly on Apple and Google Store, you should pay attention to the dimensions of your icon design.

Final design size should be 512px x 512px for Android 1024px x 1024px for IOS. For detailed information on Android icon design, you can visit Google Play icon design specifications page, and for detailed information on IOS icon design, you can visit Apple's Human Interface Guidelines page.

Saving your designs in Figma SVG and XML format

SVG

After selecting the frame with your design, select the svg option among JPG, PNG, SVG and PDF formats from the Export section at the bottom of the panel on the right. Make sure 1x is selected in the field to the left of the field where you selected the SVG option. After completing all the steps, click the Export button and choose where you want to save your file on your computer. Then click the Save button and your design is ready in SVG format.

XML

Click on the Community section on the left side of the Figma homepage. Type and search Android Vector Drawable from the Search community.

Go to Plugins section instead of All

Click the Try it out button to the left of Android Vector Drawable. After clicking the button, a hollow draft file named Android Vector Drawable will open and the plugins section will appear. After performing these steps, return to the file with your design in Figma.

There are two ways to access the Figma plugins section. First, you can access the F v option in the upper left corner of the header with the Plugins > Android Vector Drawable method. Secondly, you can access the plugins by clicking the icon symbolizing the resource next to the letter T in the header section.

Select the frame with your design and access the plugins with one of the two methods we mentioned above. Then click the Android Vector Drawable you added. A tiny PopUp called Android Vector Drawable will appear on your screen. In the lower right corner of this PopUp there are two icons for copying and exporting. Click on the Export icon, choose where you want your file to be saved on your computer and press the save button. Your design has been saved to your computer in XML format.