Styles and assets

Styles and assets

Assets

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.

Top bar, nav bar, and ticket editor icon

An app in top bar, nav bar, or ticket editor location 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.

Code

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>

File name

The SVG icon must use a file name based on its app location.

App location	Required file name
Nav bar	icon_nav_bar.svg
Ticket editor	icon_ticket_editor.svg
Top bar	icon_top_bar.svg

Sizing

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.

States and why NOT to use fill color

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).

iconSymbol API

This API lets you set the icon to a portion of your SVG. This API is not supported in the ticket editor location.

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 necessary to denote the initial icon used.