Create assets

Use of Zendesk logo / brand

We’ve put together a brand assets package for anyone working with the Zendesk brand. It contains all the parts of our brand identity – product logos, wordmarks, and all sizes of the logomark. For rules about how to use them, check out the Zendesk Style Guide PDF included in the package.

Please don't use Zendesk trademarks (original or modified) in any app icons.

Naming your app

When naming your app, don't use any Zendesk trademarks or anything that might be construed as related to Zendesk.

Marketing assets

You must include all the files below in the /assets folder of your app to pass the approval process.

If you are building a multi-product app, you can specify separate marketplace assets per product.

Large icon

This icon must meet the following requirements:

  • The image file is a PNG file
  • The image file name is logo.png
  • The size of the image is 320x320 pixels
  • The image has no rounded corners (we round the corners automatically in the UI)
Small icon

We use the small app icon in several places. It's the image associated with an app that users see most. The image is also resized depending on the context.

The app icon must meet the following requirements:

  • The image is a PNG file
  • The image file name is logo-small.png
  • The image size is 128x128 pixels
  • The PNG uses the PNG-24 format with transparency
  • The image looks good on both light and dark backgrounds
  • The image has no rounded corners (we round the corners automatically in the UI)
Screenshots

You must provide 3 screenshots in the assets folder of your app. We use the screenshots in your app listing on the Zendesk App Marketplace.

The screenshots must meet the following requirements:

  • The image files are PNG
  • The files are named screenshot-x.png where "x" is 0, 1, or 2. (example, "screenshot-0.png", "screenshot-1.png", "screenshot-2.png")
  • The size of the images is 1024x768 pixels
  • The images have no rounded corners
  • The images have no padding; full bleed is good
Designing your icons

Your app icons should capture users' attention and encourage them to click your icon to learn more. The icon represents your brand, so using screenshots is strongly discouraged. Here are some guidelines:

  • Avoid using text: icons are not aware of multiple locales
  • Avoid extending your icon graphic to the edge of the icon - leave some padding
  • Avoid using edges or borders around the image
  • Simple shapes and flat colors work better than complex designs
  • Your image will be shrunk to half its size, so make sure it still works when resized
  • Assume the image will be displayed on a white or light gray background, so avoid using a lot of white or shades of gray
  • Ask our Support or Apps team for advice on app icons if you're unsure
App icon structure

Use the following templates to help you visualize your icon. Square and circular icons are easy enough to size correctly. If your icon has pointy edges, however, sizing can be a little more challenging. For irregular shapes, it's sometimes acceptable to use the entire 128x128 area.

Template for square icons

Template for circular icons

SVG app icons

A top or nav bar app has an additional icon that the user clicks to open the app. This section outlines the image specifications and best practices for the icon. To use and manipulate the icon in your app, see the SVG topic in the SVG icons docs.

File type

Your app icon must be supplied as an SVG. No other file type will be accepted.

Sizing

Your icon will be displayed at 18px by 18px in a 30px by 30px rounded box. We add 6px padding.

Sizing is handled programmatically so your SVG can be supplied at any size, though we recommend designing your SVG on a square art board while keeping in mind that it could be significantly downsized to 18px x 18px.

Icon shape and the impacts on resizing

You should be aware that icons that do not occupy a square space may appear smaller. Using your app name as the icon is one example. Words occupy a rectangular space, and when scaled down to 18px wide it will be appear very small and is likely to be illegible:

Choosing an icon that's roughly square will appear more in proportion with the rest of the icons within the navigation

Words occupy a rectangular space. When scaled down to 18px, this results in text becoming illegible

Simple shapes work better for your icon than complex designs

When an icon is scaled down, much of the detail in complex designs can be lost. A simple icon design is much clearer and more recognizable at smaller scales.

Simple designs create a more recognisable icon that still works at smaller sizes

Detail is lost in complex icons when scaled down to 18px wide

Don't include colors, gradients, shadows or bitmaps

Don't include multiple colors in your .svg. The fill color will be handled programatically, so any colors that you include will be overwritten. Likewise, don't include gradients, drop shadows, or insert bitmaps into your .svg.

Multiple colours will be overwritten and filled with one colour. Provide monochrome icons only.

Don't include gradients or drop shadows

Create your icon on a square artboard

If you create your icon on a square artboard, it will be scaled down uniformly to 18px by 18px. If your .svg is on a rectangular artboard, the image will be stretched or compressed down to a square, distorting your icon.

Create your .svg on a square artboard and it will scale uniformly with no distortion

If designed on a rectangular artboard, your icon will be compressed down to a square, distorting your icon

Optimizing your SVG

Optimize your SVG to ensure it is as small as possible. For example, you can run your app icon through the SVGOMG optimizer by jakearchibald before submitting your app to us.


Up next: Create content