Visual consistency plays a key role in CRM usability. That’s why we were particularly excited when Yuri, the head developer of EspoCRM, shared on the official forum that custom icon support would be coming in version 9.1. With this update now available, EspoCRM users can finally personalize their instance by using custom icons — making it easier to streamline navigation, enhance visual clarity, and align the interface with their unique brand identity.
Why Use Custom Icons in EspoCRM?
Adding custom icons allows you to:
- Improve visual navigation for users
- Differentiate modules with tailored visuals
- Enhance brand consistency across the platform
- Deliver a more engaging and modern CRM interface
Our team at devcrm.it sees it as a simple yet powerful way to take UI customization to the next level — and it’s now natively supported as of EspoCRM 9.1.
Step-by-Step Guide to Adding Custom Icons in EspoCRM
1. Choose an Icon
Head over to Iconify’s icon library and find the icon you need. Select the CSS option and copy the generated code.
✅ Pro tip: Stick with clean, scalable icons like proicons--airplane for best compatibility.
2. Create the Custom CSS File
Create a new file:client/custom/my-icons.css
Paste the copied CSS inside. For example:
.proicons--airplane { display: inline-block; width: 24px; height: 24px; --svg: url("data:image/svg+xml,…"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
3. Register the CSS in Metadata
In custom/Espo/Custom/Resources/metadata/client.json:
{ "cssList": [ "__APPEND__", "client/custom/my-icons.css" ] }
4. Register the Icon Class
In custom/Espo/Custom/Resources/metadata/clientIcons.json:
{ "classList": [ "__APPEND__", "proicons--airplane" ] }
🧹 Don’t forget to clear cache after these changes.
5. Use the Icon
The new custom icon will now appear in picklists when selecting icons for entity types or tabs.
At devcrm.it, we specialize in EspoCRM customization, and our clients trust us to deliver clean, functional, and beautifully tailored interfaces. Whether you’re looking to integrate a handful of custom icons or reimagine your entire UI, we’re here to help.
Final Thoughts: A Simple Tweak with a Big Impact
Implementing custom icons in EspoCRM might seem like a small detail, but it makes a big difference in user experience and platform identity. It’s easy to do with the right guidance — or easier still when done by professionals.
If you’d like help implementing this feature or are exploring more advanced CRM enhancements, get in touch with us. Let’s make your CRM smarter, sharper, and unmistakably yours.
