icon_hub
danielharing/icon-hub
main
en
Daniel Haring
This document is published under the Creative Commons BY 4.0 license.
Wed, 15 Apr 2026 09:17:20 +0000
This extension provides a simple way to integrate icons into both the frontend and backend.
The backend icon selector
The EXT:icon_hub extension enables centralized management of icons on a per-site basis and provides the necessary stylesheets for both the backend and frontend.
A new field type is introduced for the TCA, allowing users to select from the list of configured icons.
The extension ships with the ability to integrate icons from Icomoon, but also allows for easy integration of custom icon providers.
The extension danielharing/icon-hub can be installed either via Composer (recommended) or in classic mode.
Table of contents
Check whether you are already using the extension with:
composer show | grep icon-hubThis should either give you no result or something similar to:
danielharing/icon-hub 13.0.0If it is not installed yet, use the composer require command to
install the extension:
composer require danielharing/icon-hubThe given version depends on the version of the TYPO3 CMS Core you are using.
In the backend:
Click Update now
The button is on the top right.
Click on the Action icon on the left for the extension:
Import and Install
Now the extension is installed, but not activated. To activate:
The site set can be used to configure basic features. The following settings are available for each site.
Settings of the site set
Enables the automatic generation of stylesheets for displaying icons in the backend and includes them.
Enables the automatic generation of stylesheets for displaying icons in the frontend and includes them.
Icons are defined on a per-page basis and are specified in the site settings.
A single icon set uses a provider (e.g. Icomoon) to make multiple icons available. These icons can then be used in both the backend and frontend.
Multiple icon sets from different providers can be used per site.
icons:
sets:
-
provider: icomoon
group: icomoon
options:
json: 'EXT:my_ext/Resources/Private/Fonts/Icomoon/selection.json'
fonts: 'EXT:my_ext/Resources/Public/Fonts/Icomoon/'The following settings are available for a single icon set.
The name of the provider to be used.
Either a predefined abbreviation (e.g. “icomoon”) or the full class name.
icons:
sets:
-
provider: Vendor\MyExt\Imaging\IconSet\CustomIconSetProviderAssigns the icon set to a group in the backend select fields.
icons:
sets:
-
provider: Vendor\MyExt\Imaging\IconSet\CustomIconSetProvider
group: web_iconsConfigures the respective icon set provider. (See Icon provider options)
Each icon set provider uses different options to make icons available.
The extension comes with a provider for integrating Icomoon icons, but can be expanded to include additional providers.
The path to the selection. file from Icomoon.
Can be specified as either a storage path
(1:/), an extension path
(EXT:), or an
absolute path (/fonts/).
icons:
sets:
-
provider: icomoon
options:
json: 'EXT:my_ext/Resources/Private/Fonts/Icomoon/selection.json'The path to the font files.
Can be specified as either a storage path
(1:/), an extension path
(EXT:), or an absolute path
(/fonts/).
icons:
sets:
-
provider: icomoon
options:
fonts: '/fonts/icomoon/'The icon database field type functions like a standard
single-select
field and displays all available icons. All configuration options for a
standard single-select field can be applied.
The backend icon selector
[
'columns' => [
'icon_select' => [
'label' => 'Icon selector',
'config' => [
'type' => 'icon',
'items' => [
['label' => 'Choose icon…', 'value' => '']
],
'itemGroups' => [
'icomoon' => 'Icomoon'
]
]
]
]
]The
<core: ViewHelper, provided by EXT:core system
extension, can be used to render icons in Fluid.
Just make sure that the corresponding namespace is loaded in the template and pass the icon identifier (e.g. retrieved from a database field).
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<core:icon identifier="{data.icon}" />
</html>An icon set provider is responsible for providing icons and writing the
necessary stylesheet. The class must implement
\Daniel,
but typically extends
\Daniel
instead.
If the abstract class is used, you must specify the icon provider, which will later be responsible for rendering the icons. You can use existing core classes or your own implementations for this purpose.
declare(strict_types=1);
namespace Vendor\MyExt\Imaging\IconSet;
use DanielHaring\IconHub\Imaging\IconSet\AbstractIconSetProvider;
use TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider;
class CustomIconSetProvider extends AbstractIconSetProvider
{
protected function getProviderName(): string
{
return SvgIconProvider::class;
}
}The actual icons are provided via the generator method
provide. This method is expected to yield instances of
\Daniel.
If the recommended abstract class is used, icons can be created using
the helper method
create.
declare(strict_types=1);
namespace Vendor\MyExt\Imaging\IconSet;
use DanielHaring\IconHub\Imaging\IconSet\AbstractIconSetProvider;
class CustomIconSetProvider extends AbstractIconSetProvider
{
public function provideIcons(): \Generator
{
yield $this->createIcon('tx-myext-dummy', 'Dummy');
}
}The
provide method is also primarily used to generate the
stylesheet.
The required styles can be written using
$this->styles->write.
This method can be used as often as needed to accumulate styles.
Although not strictly necessary, it is highly recommended to check in
advance whether stylesheet writing is enabled to avoid unnecessary
computing.
$this->styles->is can be used for this
purpose.
declare(strict_types=1);
namespace Vendor\MyExt\Imaging\IconSet;
use DanielHaring\IconHub\Imaging\IconSet\AbstractIconSetProvider;
class CustomIconSetProvider extends AbstractIconSetProvider
{
public function provideIcons(): \Generator
{
if ($this->styles->isEnabled()) {
$this->styles->write('/* Base styles to write. */');
$this->styles->write('/* Icon specific styles to write. */');
}
yield $this->createIcon('tx-myext-dummy', 'Dummy');
}
}This is what a simplified, typical icon set provider looks like:
declare(strict_types=1);
namespace Vendor\MyExt\Imaging\IconSet;
use DanielHaring\IconHub\Imaging\IconSet\AbstractIconSetProvider;
use TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider;
class CustomIconSetProvider extends AbstractIconSetProvider
{
public function provideIcons(): \Generator
{
if ($this->styles->isEnabled()) {
$this->styles->write('/* Base styles for the icon set. */');
}
foreach (['dummy', 'test'] as $iconName) {
if ($this->styles->isEnabled()) {
$this->styles->write('/* Styles for icon "' . $iconName . '". */');
}
yield $this->createIcon('tx-myext-' . $iconName, $iconName, [
'source' => 'EXT:my_ext/Resources/Public/Icons/' . $iconName . '.svg'
]);
}
}
protected function getProviderName(): string
{
return SvgIconProvider::class;
}
}