You’ll need to select or create an icon when you publish your effect in Spark AR Hub. Your icon is an image that represents your effect in the camera, and can be either an image you upload or a frame from your demo video.

Icons are uploaded alongside your project file and demo video as part of the effect publishing process. Find out more about publishing your effects on Facebook and Instagram.

Icon ideas and best practice

Whether you use a frame from your demo video or create an image, an expressive and memorable icon will help people notice and recognize your effect. It should:

  • Have simple shapes, sharp lines and bright colors.
  • Focus on representing the main theme of your effect rather than all the detail in the full effect.
  • Have a simple background.
  • Capture the essence of the effect to give people a good idea of what will happen when they use it.
  • Be easy to read on phone screen. It's best not to include too much text.

These icons follow our guidelines, and our best practice suggestions:

Creating an icon

It’s a good idea to have an image ready in advance so you can quickly upload it when prompted during the publishing process.

You don’t need to do any additional formatting or cropping of your image before you upload it. However, the following tips will help make sure you don’t get any errors when you do upload it:

  • Your image must have square, not rounded corners. Don’t crop your image into a circle or oval shape — we do this for you on upload.
  • Your image mustn't include transparency. Use a regular JPEG file to avoid issues as this format doesn’t support transparency.
  • Your image mustn’t be too small. Dimensions must be at least 200 x 200 pixels.

Using the icon template

Another option is to use our icon template as a guide to create your own icon in Adobe® Photoshop®. When the Examples layer is turned off, the template looks like this:

You just need to make sure that any artwork you create falls within the outer red circle and that most of it stays within the inner green circle. Don't forget to turn off the Guidelines layer before exporting it.

Using a video thumbnail

After you upload a demo video, you will see video thumbnails that you can choose to use as an effect icon. The thumbnail icon will automatically be created at the correct size.