Adding Visual Tree Icons

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

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 are no icons uploaded for a certain Rank, it will default to the Visual Tree Associate Type icons.

Creating Your Own 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

  1. In the Icons section, hover your mouse over a rank and click the Edit icon.

    size square

    Your computer’s file finder opens.

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

    Note: Images must be an SVG.

  3. Your icon is added. 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.