You must include the following assets in the assets folder for the layout template as well as for app listing and management pages in Zendesk Support:

• logo.png - 320px square
• logo-small.png - 128px square

Place any additional assets for your app in the assets folder. Asset file types that are accepted include .png, .jpg, .jpeg, .gif, .svg, .js, .htm, .html, .css, .map, .eot, .woff, .woff2, .otf, .ttf, .json, .xml, .hbs, and .hdbs.

A top or nav bar app has an additional icon that the user clicks to open the app. To style the icon to match any Zendesk account's brand colors, provide an SVG.

You can use one of the following approaches to code your SVG:

• Put all the code in a <svg> tag.
• Use the <symbol> tag to create multiple icons for your app.

An <svg> or <symbol> tag needs to include a viewBox attribute. Although the attribute can specify any size, the image will be resized to 18x18 by the Zendesk CSS.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
  <circle cx="9" cy="9" r="5"/>
</svg>

If you are using <symbol> tags, the viewbox attribute needs to be on the <symbol> tag, and you need to specify one <symbol> to have default as the id, to denote the initial icon.

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="default" viewBox="0 0 18 18">
    <circle cx="9" cy="9" r="5"/>
  </symbol>

  <symbol id="mySymbol" viewBox="0 0 18 18">
    <circle cx="3" cy="3" r="2"/>
    <circle cx="9" cy="9" r="2"/>
    <circle cx="15" cy="15" r="2"/>
  </symbol>
</svg>

You must name the svg icon icon_top_bar.svg or icon_nav_bar.svg.

Your icon will be displayed at 18px by 18px, and padded with 6px, to fill a 30px by 30px rounded box.

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

The look and hover state of your icon is handled by the Zendesk CSS. Don't overwrite the Zendesk styles by adding fill colors.

For example, it's tempting to use a fill color to make your app icon stand out.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
  <circle fill="red" cx="9" cy="9" r="5"/>
</svg>

Don't use a fill color. Zendesk will color your SVG using the same colors as Zendesk icons. This guarantees that all the icons have the same style. Since the fill color of the icons is generated based on the Zendesk brand color, hardcoding it will result in your app looking different from Zendesk icons on different Zendesk instances.

Because element attributes on the element take precedence over fill colors defined in CSS, your hover/active color will not change anymore (when using a fill color).

This API lets you set the icon to a portion of your SVG.

client.set('iconSymbol', 'mySymbol')

Your SVG will need to change to the following style:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="default" viewBox="0 0 18 18">
    <circle cx="9" cy="9" r="5"/>
  </symbol>

  <symbol id="mySymbol" viewBox="0 0 18 18">
    <path d="M0 0h9v3H0zM0 7h18v3H0zM0 14h18v3H0zM15 3l3-3h-6"/>
  </symbol>
</svg>

default is neccessary to denote the initial icon used.