Title: paste SVG code icons directly
Last modified: April 11, 2026

---

# paste SVG code icons directly

 *  Resolved [Suki](https://wordpress.org/support/users/sukinoz/)
 * (@sukinoz)
 * [2 months ago](https://wordpress.org/support/topic/paste-svg-code-icons-directly/)
 * Great plugin. Congratulations!
 * It would be good if you could **paste SVG code icons directly**
 * Ps: To be honest, I’ve never dared to try it before because the plugin’s website
   looks abandoned or outdated. It’s striking that the website isn’t responsive,
   especially when we’re talking about the website for a WordPress plugin 😉

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Janis Elsts](https://wordpress.org/support/users/whiteshadow/)
 * (@whiteshadow)
 * [2 months ago](https://wordpress.org/support/topic/paste-svg-code-icons-directly/#post-18877714)
 * You can use SVG code icons if you encode them the way that WordPress [expects (see the `$icon_url` parameter)](https://developer.wordpress.org/reference/functions/add_menu_page/).
   Specifically, base64-encode the icon, and add `data:image/svg+xml;base64,` to
   the beginning of the code. Then you can enter the result in the “Icon URL” field.
 * For example, let’s take [this icon](https://icons.getbootstrap.com/icons/1-square/)
   from Bootstrap Icons:
 *     ```wp-block-code
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-1-square" viewBox="0 0 16 16">  <path d="M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383z"/>  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z"/></svg>
       ```
   
 * Encode it to Base64 (I used [http://www.base64encode.org](https://www.base64encode.org/)
   for this example):
 *     ```wp-block-code
       PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktMS1zcXVhcmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTkuMjgzIDQuMDAyVjEySDcuOTcxVjUuMzM4aC0uMDY1TDYuMDcyIDYuNjU2VjUuMzg1bDEuODk5LTEuMzgzeiIvPgogIDxwYXRoIGQ9Ik0wIDJhMiAyIDAgMCAxIDItMmgxMmEyIDIgMCAwIDEgMiAydjEyYTIgMiAwIDAgMS0yIDJIMmEyIDIgMCAwIDEtMi0yem0xNSAwYTEgMSAwIDAgMC0xLTFIMmExIDEgMCAwIDAtMSAxdjEyYTEgMSAwIDAgMCAxIDFoMTJhMSAxIDAgMCAwIDEtMXoiLz4KPC9zdmc+
       ```
   
 * Add the `data:image/svg+xml;base64,` prefix:
 *     ```wp-block-code
       data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktMS1zcXVhcmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTkuMjgzIDQuMDAyVjEySDcuOTcxVjUuMzM4aC0uMDY1TDYuMDcyIDYuNjU2VjUuMzg1bDEuODk5LTEuMzgzeiIvPgogIDxwYXRoIGQ9Ik0wIDJhMiAyIDAgMCAxIDItMmgxMmEyIDIgMCAwIDEgMiAydjEyYTIgMiAwIDAgMS0yIDJIMmEyIDIgMCAwIDEtMi0yem0xNSAwYTEgMSAwIDAgMC0xLTFIMmExIDEgMCAwIDAtMSAxdjEyYTEgMSAwIDAgMCAxIDFoMTJhMSAxIDAgMCAwIDEtMXoiLz4KPC9zdmc+
       ```
   
 * Then you can put that code in the “Icon URL” field. Here’s what the result looks
   like on a custom menu item:
 * ![](https://i0.wp.com/i.imgur.com/0zXPDRk.png?ssl=1)
 *  Thread Starter [Suki](https://wordpress.org/support/users/sukinoz/)
 * (@sukinoz)
 * [2 months ago](https://wordpress.org/support/topic/paste-svg-code-icons-directly/#post-18877901)
 * Thank you for your reply,
   and thank you very much for such a detailed response.
 * I can confirm that the proposed system works (although you’d already made that
   very clear with a real-life example and screenshots!)
 * A great plugin, no doubt, and a great developer.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fpaste-svg-code-icons-directly%2F%3Foutput_format%3Dmd&locale=en_US)
to reply to this topic.

 * ![](https://ps.w.org/admin-menu-editor/assets/icon-128x128.png?rev=1418604)
 * [Admin Menu Editor](https://wordpress.org/plugins/admin-menu-editor/)
 * [Support Threads](https://wordpress.org/support/plugin/admin-menu-editor/)
 * [Active Topics](https://wordpress.org/support/plugin/admin-menu-editor/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/admin-menu-editor/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/admin-menu-editor/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [Suki](https://wordpress.org/support/users/sukinoz/)
 * Last activity: [2 months ago](https://wordpress.org/support/topic/paste-svg-code-icons-directly/#post-18877901)
 * Status: resolved