How to Customize Module Icons in Your Navigation: A Step-by-Step Guide
Want to give your platform’s navigation a personal touch? Changing module icons is a quick and effective way to improve visual clarity or match your team’s workflow. Here’s how to do it safely and creatively.
Step 1: Access the Icon Settings
Navigate to Settings in your platform.
Locate the module whose icon you wish to change.
Click the edit icon (usually a pencil or gear symbol) next to the module name.
Step 2: Choose a New Icon
After clicking edit, you’ll see an option to edit or change the icon. The platform typically provides a built-in library of icons to choose from.
But what if you can’t find the perfect icon?
No problem—you can add custom icons from Font Awesome’s free collection.
Step 3: Adding Custom Icons from Font Awesome
Visit Font Awesome and browse their free icons.
Example: Motorcycle Icon
Copy the icon’s class code (e.g., fa-motorcycle). https://fontawesome.com/icons/motorcycle?f=classic&s=solid
On your server, navigate to the icons configuration file, usually located at:
/opt/cyops-ui/app/components/ui/icons/icons.json
Add or replace an icon entry with the new Font Awesome class.
Step 4: Apply and Refresh
After updating the JSON file, refresh your browser.
The new icon will now appear in the GUI.
Important Notes & Best Practices
Only free Font Awesome icons are supported—pro icons will not work.
Test in a development or staging environment first. Avoid making these changes directly on a production instance to prevent unexpected issues.
