Your Higher Logic Vanilla (Vanilla) community includes dozens of built-in icons spanning practically every page and function. As part of Vanilla's theming and branding tools, you can upload your own custom icons to ensure consistency across all of your digital platforms.
Before we begin…
Icon management as discussed in this article requires a Role with the Garden > Settings > Manage permission.
Because updating these icons has site-wide impact, the ability to do so should be limited to only the most trusted users.
Accepted image file type
All icons must be .svg because they support dynamic coloring, meaning they can automatically inherit colors from a Style Guide.
📝 NOTE: Custom .svg images must have a viewBox, which defines the position and dimension of the viewport for an .svg image. This attribute should be built in when creating icons from most design software or when downloading icons from any reputable source.
Benefits of using custom icons
Whether you plan to use completely custom icons or simply tweak the default ones, here are two important benefits to leveraging the features discussed in this article to update your icons:
- Brand Consistency: Updating your community icons to match your branding ensures a cohesive look across all of your digital platforms and reinforces your brand identity.
- Accessibility: Updating icon images or simply their color helps you keep accessibility principles in mind to ensure they are easily distinguishable for users with visual impairments. This can help make your website more inclusive and compliant with accessibility standards.
Access your icons
- Access the Dashboard.
- Navigate to Appearance > Branding & Assets > Manage Icons.
Notes for working with icons
Before uploading an icon, whether singularly or in bulk, keep the following notes and tips in mind:
- Uploading a custom icon does not erase the default; it will be available to revert back to at any point in the future.
- Many icons have separate icons for different states (e.g., one for the inactive state and one for the active state, etc.). When replacing an icon, make sure to check whether additional icon states are present so you can also update them for consistency.
- Most default icons across your community are 24x24px, and this is the icon size we generally recommend when uploading new ones.
- If you want a custom icon to inherit dynamic coloring from a Style Guide, it must be pure black (#000000). Icons with set colors will not be influenced by coloring inherited from a Style Guide.
- Icons are named according to what they do, not what they look like. So, for example, if you want to replace the default trashcan icon that represents a delete action, search "delete" not "trashcan."
- In a few instances, some of the default icons that look the same have different names. This is intentional to provide the freedom to use different icons for these icons. An example of this are our bell icons: one bell is used for Category following and another is used as a notification indicator in the site header.
Upload a custom icon
On the Manage Icons page, all of Vanilla's default icons are listed. Let's walk through how to replace a default icon with a custom one.
📝 NOTE: This section explains how to upload a single icon; if you want to bulk upload a batch of icons, refer to the Download & upload icons in bulk section.
- Once you have located the icon to replace, click to select it. (Use the Search feature to quickly find specific icons.)
- In the resulting dialog, click Upload New Icon.
- Browse your device to locate and upload the .svg image file you want to use.
After you upload the icon, it will become the Active icon, shown in the ACTIVE ICON area, with the default (and any previous icons) now listed in the PREVIOUS ICONS section. Learn more about how to manage the Active and Previous icons in the Manage Icons section below.
⚠️ IMPORTANT: The ACTIVE ICON is what's currently in use across your community.
Manage icons
On the Manage Icons page, all default and custom icons are listed. After selecting an icon, you can manage its active and previous icons using the following (…) menu options:
- Delete: Permanently delete an icon. 📝 NOTE: You cannot delete default icons, only custom icons you have uploaded. This is a safeguard to ensure you can always revert back to Vanilla's set of default icons, if necessary.
- Set as Active: Set an icon as the Active icon. The icon you replaced will move to the PREVIOUS ICONS area, where it can be managed at a later time.
- Download: Download an icon's image file to your device. This allows you to make adjustments to icons and then re-upload them.
Filter & preview icons
To make it easier to work with, browse, and locate specific icons, use the following filter and preview options:
- Icon Name: Search for icons by their name. As you type, the list dynamically updates to show only those icons with matching names, whether partial or full. ✔️ TIP: Icons are named according to what they do, not what they look like. So, for example, if you want to replace the default trashcan icon that represents a delete action, search "delete" not "trashcan."
- Icon Type: Use these options to control what icons display in the list.
- All: All system default and custom icons display.
- Custom Icon: Displays only icons that have been replaced with a custom icon. (A custom icon must be currently active to qualify.)
- System Icon: Displays only default system icons that are currently active.
- Icon Size: Controls how large the icons display in the list. You can set them to 24x24, 48x48, or 96x96 pixels. Rendering them at a larger size can be helpful when trying to see more icon detail, while a smaller size makes it easier to scan through them. 📝 NOTE: Most default icons display in your community at 24x24.
- Preview Color: Use this to dynamically change the color of the icons in the list, helping you see what various icons might look like with different coloring. 📝 NOTE: This does not apply color to your icons; it functions only as a preview. In addition, dynamic coloring only applies to icons with colors set to pure black (#000000). Custom icons uploaded with set colors will not be affected.
Download and upload icons in bulk
These options allow you to bulk-download and bulk-upload community icons as .zip files for easy bulk management. All images will be in .svg format.
This is the perfect way to make global changes to all or most of the icons, whether with an in-house designer or to provide to a third-party service. Just make sure that, whomever you work with, they supply image files as .svg.
✔️ TIP: Reference the notes in the Notes for working with icons section before uploading icons.
At the upper right of the Manage Icons page:
- Select Download Active Icon Pack to bulk-download to a .zip file all of the icons that are currently set to ACTIVE.
- Select Download System Icon Pack to bulk-download to a .zip file Vanilla's full set of default icons.
- Select Upload Icon Pack to upload a .zip file containing a batch of icons you want to use. 📝 NOTE: If you want a custom icon to inherit dynamic coloring from a Style Guide, it must be pure black (#000000).
Working with zip files - workflow
Generally speaking, the workflow for working with images via these bulk icon packs is as follows:
- Download the desired batch of icons using either the Active or System Icon Pack option.
- Give this .zip icon pack to a designer, whether from your organization or a third-party.
- The designer updates some (or all) of the icons, making sure to save them off as .svg files and place them back into the .zip file. ⚠️ IMPORTANT: During this step, it's crucial that the names of the icons do not change from their defaults, so when the updated files are placed back into the .zip file they will replace the originals.
- After the .zip file is given back to you, navigate to the Manage Icons page and upload it using the Upload Icon Pack option.
- At this point, the Preview Icon Pack popup displays, indicating how many icons have changed and listing the "before and after" icons for you to review. If you're happy with the results, click Activate Icon Pack to finalize the changes.
How to customize Reaction icons
Reactions are one-click responses to posts and comments. They enable your users to indicate an emotional ("Awesome!") or empirical ("Like," "Agree," "Vote Down") response without having to type a comment. This is important because it gives users a more "indirect" feedback mechanism when they may not have anything to add via a comment.
Reaction icons display in your community in two places:
Posts and comments
User profiles
A user's profile displays the Reactions they have received from community members, providing an overview of how others are reacting to their content.
The icons in these two locations are customized in different areas of your Vanilla dashboard, as outlined in the following article:
