How to add a custom icon to a Craft CMS control panel section

Oscar de la Hera Gomez
A flower that represents Craft CMS with the text "Control Panel Section Icon" beneath it.

A step by step guide on adding an SVG icon to a Craft CMS control panel section within a plugin or module that changes color on selection.

The following tutorial walks you through how to add an icon to a Craft CMS control panel section within a plugin or module that changes color on selection. It builds on top of our Open Source Craft CMS starter project which can be found at the repository below.

We recommend that you download or clone our Open Source starter project, check out the main branch and complete the steps below. The changes can be found on the tutorial/cp-section-icon.

git clone git@github.com:delasign/craft-cms-starter.git

Step One: Setup the plugin

A screenshot of our Sample Plugin Installed.

Follow the tutorial linked below to learn how to create and setup a Craft CMS plugin.

Step Two: Setup the Control panel section

A screenshot of Craft CMS showing our Control Panel section working as expected.

Follow the tutorial linked below to learn how to setup a control panel section, and if interested, how to make custom UI.

Step Three: Add the control panel icon

A screenshot of Craft CMS showing the Control Panel Section Icon highlighted.

There are two ways to add a control panel icon and depends on whether you are have enabled $hasCpSection or if you registered a nav item.

A | $hasCpSection

Place your icon as an .svg titled icon-mask.svg in your plugins src folder.

Make sure that the svg path has style="enable-background:new;" to ensure that icon functions as you would expect with the Craft CMS control panel.

B | Registered Navigation Item

Place your icon as a .svg in your desired location. We recommend placing it in the src/resources folder.

Once you are done, point the 'icon' parameter of the RegisterCpNavItemsEvent function to the location of your icon.

Make sure that the svg path has style="enable-background:new;" to ensure that icon functions as you would expect with the Craft CMS control panel.

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details