Adding Visual Tree Icons

Although the Branding page is mainly for adding your company colors and logos, you can also edit the rank icons that appear in the Web Office Visual Tree.

What Are Visual Tree Icons?

Upload Web Office Visual Tree Rank and Associate Type icons.

You can upload SVG icons for each Rank and Associate Type. These icons will replace the generic profile shadow image in the Visual Tree for all Tree members.

Web Office Visual Tree shadow icons

If there aren't icons uploaded for a certain Rank, it will default to the Visual Tree Associate Type icons.

Creating SVG Icons

The Visual Tree uses SVGs for icons and can be a little tricky to create as they combine visual designing and coding.

Programs that can create SVGs:

In Adobe Illustrator

  • Use simple shapes to create your icons.

  • Convert all text to paths (Type > Create Outlines (SHIFT+CTRL+O)

  • If you are using filters, use the SVG Filters found on the Effects menu.

  • Simplify your paths as the last step before saving (Object > Path > Simplify…​).

  • Use unique naming for your layers and artboards; this is important to ensure the styles do not override each other on the tree.

  • When saving as an SVG, use the Presentation Attributes on your Advanced CSS Properties.

    Illustrator SVG Options

Uploading Icons

Admin: Web Office Admin
Page: Web Office Configuration > Branding
Permission: Branding

  The Visual Tree Icon background color cannot be configured and is white by default. Because of this, white icons may not be visible unless they contain a heavy shadow or outline.
  1. In the Icons section, hover your mouse over a rank and click the icon.

    size square

    Your computer’s file finder opens.

  2. Navigate to your image’s saved location on your computer and click Open.

      Images must be an SVG file.
  3. Your icon is uploaded. Repeat for each rank tile.

Was this article helpful?
0 out of 0 found this helpful
Previous Next



Please sign in to leave a comment.