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 squarelogo-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 and nav bar icon
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.
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
You must name the svg icon icon_top_bar.svg
or icon_nav_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 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.
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.