Description

PAN SVG Icons replaces icon fonts such as Dashicons or Font Awesome with clean, self-hosted SVG icons: no font download, no third-party servers, sharp on every screen and colourable with CSS.

Icons on your website (main feature)

Block “PAN Icon”: choose the icon, size, colour and an optional link.
Shortcode: [icon name="check" size="24" color="currentColor"]
Output is an inline SVG. Decorative icons get aria-hidden="true". With an alternative text the icon gets role="img" and aria-label. Icons used as links always get an accessible name.
No frontend CSS or JavaScript is loaded at all. The output is page-cache safe, nothing depends on the visitor.
Icon field with live preview for every item of classic navigation menus (Appearance > Menus).

Admin menu icons (optional)

One settings page lists all main and sub menu items of the admin menu, including those of other plugins.
Pick an icon per item (search field, preview) right in the list. It is saved instantly via AJAX, without reloading the page.
WordPress has no icon function for submenus. PAN SVG Icons places the icon in front of the menu text with CSS (::before with mask-image). Menu titles and translations stay unchanged.
Works in the admin only. Nothing is loaded in the frontend.

Good to know

About 250 commonly used icons (Lucide). Uploading your own SVGs is deliberately not possible.
Website icons are always available, no switch needed. Only the optional admin menu icons have a switch (off by default).
Import and export of the settings, own error log, built-in help.
Works with any theme. The shortcode can also be used in page builders such as Elementor.
Made by Pan4. More WordPress plugins without subscription at https://pan4.de/shop/
The plugin interface is in English and includes a German translation. Other languages are provided by the community on translate.wordpress.org.

Credits

The icons are taken from Lucide (ISC License). Some of them are derived from Feather (MIT License, Copyright (c) 2013-present Cole Bemis). The complete licence text is included in the file lucide-LICENSE.txt in the plugin folder.

Privacy

PAN SVG Icons does not collect, store or transmit any personal data. It uses no cookies and makes no external requests. The error log is stored locally in your database and contains only technical messages of the plugin.

Screenshots

Icons in your website navigation: one default icon per menu level, plus an icon for single menu items.

Tab "Website menus": default icons for main and sub items, position (before or after the text), size and an icon for each menu item. — Icons in your website navigation: one default icon per menu level, plus an icon for single menu items.

Blocks

This plugin provides 1 block.

PAN Icon PAN SVG Icons: a clean SVG icon with size, colour and optional link.

Installation

Upload the pan-svg-icons folder to /wp-content/plugins/ or install the plugin via “Plugins > Add New”.
Activate the plugin.
Open “Pan4 > PAN SVG Icons” (or use the “Settings” link in the plugin list) and choose your icons in the tab “Website menus”.

FAQ

Does it slow down my website?: No. On your website the plugin loads no CSS, no JavaScript and no font file. Icons are inline SVG in the page code, so there are no extra requests. The icon list is only loaded in the block editor and on the plugin’s own admin pages.
How do I put an icon in my navigation menu?: Open the tab “Website menus” in the plugin settings. Pick a default icon for all main items and for all sub items of your menus, or choose an icon for single menu items. An icon on a single item takes precedence. You can also use the icon field in Appearance > Menus. This works for classic menus, not for the Navigation block of the site editor.
Does the plugin contact external servers?: No. All icons are included in the plugin. There is no tracking and no external request.
Can I upload my own SVG files?: No, by design. Only the bundled, sanitised icons can be used. This avoids the security risks of SVG uploads.
Which icons are included?: About 250 icons from the open source library Lucide, searchable in German and English.
What happens when I delete the plugin?: On deletion the plugin removes only its own options (settings, menu icon assignments, default icons of the website menus, error log). Your content is never touched: blocks and shortcodes stay in your posts and pages, but are no longer displayed without the plugin. Before that, the “Danger zone” on the settings page can remove all plugin data on demand (you have to type a confirmation word).
Does it work with page caching?: Yes. The icon output is the same for every visitor.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“PAN SVG Icons” is open source software. The following people have contributed to this plugin.

pan4de

Translate “PAN SVG Icons” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.3.7

New: in the classic menu editor the icon field now has a “Choose icon” button with a visual icon grid (search, recently used, arrow keys) instead of a plain text list.
Fix: Plugin URI points to the correct product page.

1.3.6

New: block patterns (icon with text, icon box, three icon boxes) in the category “PAN SVG Icons”.
New: a short quick-start notice after activation (shown once, can be dismissed).
New: recently used icons appear first in the icon pickers (admin and block sidebar).
Keyboard: arrow keys move through the icon grid in both pickers.
German translation is bundled again; other languages come from translate.wordpress.org.

1.3.5

Block “PAN Icon”: the colour is now chosen with a colour picker that offers your theme colours (a custom colour is still possible).
The plugin texts are now English by default.
Plugin URI added to the plugin header.
New: link “More plugins by Pan4” in the plugin list and a short “More from Pan4” section in the help. The menu editor field links to the icon picker.
Admin menu: new buttons “Icon for all sub items without icon” and “Icon for all main items without icon” set an icon in one step. Items with their own icon keep it.

1.3.4

Block “PAN Icon”: new fields “Space on the right” and “Space below” (0 to 120 px) in the block settings, so the distance to the text is easy to set.

1.3.3

Texts: help and readme now name the block “PAN Icon” everywhere.

1.3.2

Fix: the orange “PAN Icon” symbol of the block is now shown reliably in the inserter, the block toolbar and the sidebar.
Readme: screenshots added.

1.3.1

The block is now called “PAN Icon” with an orange star icon in the inserter, so it is easy to tell apart from other icon blocks. Search for “pan” or “icon”.

1.3.0

Website menu icons: choose the position (before or after the text) and the size (10 to 64 px) for all icons.

1.2.1

Admin menu: leftover default icons for all submenu items (from earlier versions) are discarded, so every admin item can be reset individually again.

1.2.0

New tab “Website menus”: default icon for all main items and for all sub items of your navigation menus, plus an icon per menu item with a menu selector.
Website icons (block, shortcode, menu icons) no longer need a switch and are always available. Only the admin menu icons keep their optional switch.
The admin menu tab is simplified and renamed “Admin menu icons”.

1.0.0

First release: Icon block, [icon] shortcode, icons in navigation menus, optional admin menu icons, import/export, error log, help.

Description

Credits

Privacy

Screenshots

Blocks

Installation

FAQ

Does it slow down my website?

How do I put an icon in my navigation menu?

Does the plugin contact external servers?

Can I upload my own SVG files?

Which icons are included?

What happens when I delete the plugin?

Does it work with page caching?