PHPackages                             oliverthiele/ot-iconselector - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. oliverthiele/ot-iconselector

ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility)

oliverthiele/ot-iconselector
============================

Icon Selector - TYPO3 backend form element for selecting FontAwesome icons with AJAX search and SVG preview

0.1.0(today)01↑2900%GPL-2.0-or-laterPHPPHP >=8.3

Since Jun 19Pushed todayCompare

[ Source](https://github.com/oliverthiele/ot-iconselector)[ Packagist](https://packagist.org/packages/oliverthiele/ot-iconselector)[ Docs](https://www.oliver-thiele.de)[ RSS](/packages/oliverthiele-ot-iconselector/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (1)Versions (3)Used By (0)

Icon Selector — TYPO3 Backend Icon Picker
=========================================

[](#icon-selector--typo3-backend-icon-picker)

Custom backend form element for selecting SVG icons with AJAX search, live preview and a favorites system.

[![TYPO3](https://camo.githubusercontent.com/ff624ed071afbc7085dcd4f99f2358379f8284ba14ae6891eab075f69c55929f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31332e342d6f72616e67652e737667)](https://typo3.org/)[![Packagist Version](https://camo.githubusercontent.com/6f952efd95a477be1365a22ca2efc99cd14e0e4e02c1491a0560eef33a4285d4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f6c69766572746869656c652f6f742d69636f6e73656c6563746f722e737667)](https://packagist.org/packages/oliverthiele/ot-iconselector)[![PHP](https://camo.githubusercontent.com/d230825e3f4c32676dca86ea37a07c3300e66323d51a4af0b8e5cd0f022b1491/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f6f6c69766572746869656c652f6f742d69636f6e73656c6563746f722f7068702e737667)](https://php.net/)[![License](https://camo.githubusercontent.com/302699de414c35c878823e691c418c8a1cfdac0e0ee6239e8d1a83add0dde770/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6f6c69766572746869656c652f6f742d69636f6e73656c6563746f722e737667)](LICENSE)[![Changelog](https://camo.githubusercontent.com/6bc02a7bc61afc1cb3faaa53420df6d904b9940d7f3e2e11a463e1fdbb3cd52d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4368616e67656c6f672d4348414e47454c4f472e6d642d626c75652e737667)](CHANGELOG.md)

---

Features
--------

[](#features)

- **AJAX icon search** — type-ahead search through thousands of SVG icons with debounced requests
- **SVG preview** — inline SVG rendering in search results and selected state
- **Multi-term search** — space-separated words are combined with AND logic (e.g. "chevron right")
- **Keyboard navigation** — arrow keys, Enter to select, Escape to close
- **Favorites modal** — integrator-defined and personal editor favorites, accessible via a heart button
- **SiteSet configuration** — icon directory, style and favorites configurable per site
- **No vendor lock-in** — works with any SVG icon set (FontAwesome, Bootstrap Icons, custom icons)
- **Non-breaking integration** — stores plain string identifiers, existing values remain compatible

---

Requirements
------------

[](#requirements)

RequirementVersionTYPO3^13.4 | ^14.3PHP>=8.3---

Installation
------------

[](#installation)

```
composer require oliverthiele/ot-iconselector
```

Then run the TYPO3 setup:

```
vendor/bin/typo3 extension:setup -e ot_iconselector
# or via DDEV:
ddev typo3 extension:setup -e ot_iconselector
```

---

Configuration
-------------

[](#configuration)

### 1. Include the SiteSet

[](#1-include-the-siteset)

Add `oliverthiele/ot-iconselector` to your site configuration's dependencies.

### 2. Configure the icon directory

[](#2-configure-the-icon-directory)

The extension reads the icon directory from the `otIcons.iconDirectory` and `otIcons.defaultIconStyle` site settings (provided by `oliverthiele/ot-icons`). Alternatively, set them directly in TCA:

```
'icon_identifier' => [
    'config' => [
        'type' => 'input',
        'renderType' => 'otIconSelector',
        'iconDirectory' => 'EXT:my_sitepackage/Resources/Public/Icons/SVG/',
        'iconStyle' => 'solid',
    ],
],
```

### 3. Configure favorites (optional)

[](#3-configure-favorites-optional)

Set integrator favorites in your site settings:

```
otIconselector:
  favorites:
    default: 'chevron-right,chevron-left,phone,envelope,download'
    buttons: 'arrow-right,phone,envelope,download'
```

Editors can add personal favorites via the star toggle in search results.

---

Usage
-----

[](#usage)

Register the `otIconSelector` render type on any `type: input` field:

```
'icon_identifier' => [
    'exclude' => true,
    'label' => 'Icon',
    'config' => [
        'type' => 'input',
        'renderType' => 'otIconSelector',
        // Optional overrides:
        // 'iconDirectory' => 'EXT:my_ext/Resources/Public/Icons/',
        // 'iconStyle' => 'solid',
        // 'maxResults' => 36,
        // 'favoriteGroup' => 'buttons',
    ],
],
```

The field stores a plain string identifier (e.g. `chevron-right`). The database column remains a standard `varchar` — no schema changes required.

For conditional usage (when the extension may not be installed):

```
use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;

'icon_identifier' => [
    'config' => [
        'type' => 'input',
        'renderType' => ExtensionManagementUtility::isLoaded('ot_iconselector')
            ? 'otIconSelector'
            : null,
        'size' => 30,
        'max' => 40,
    ],
],
```

---

License
-------

[](#license)

GPL-2.0-or-later — see [LICENSE](LICENSE)

---

Author
------

[](#author)

Oliver Thiele — [oliver-thiele.de](https://www.oliver-thiele.de)

###  Health Score

38

—

LowBetter than 83% of packages

Maintenance100

Actively maintained with recent releases

Popularity2

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity39

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

0d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/5030298?v=4)[Oliver Thiele](/maintainers/oliverthiele)[@oliverthiele](https://github.com/oliverthiele)

---

Top Contributors

[![oliverthiele](https://avatars.githubusercontent.com/u/5030298?v=4)](https://github.com/oliverthiele "oliverthiele (1 commits)")

### Embed Badge

![Health badge](/badges/oliverthiele-ot-iconselector/health.svg)

```
[![Health](https://phpackages.com/badges/oliverthiele-ot-iconselector/health.svg)](https://phpackages.com/packages/oliverthiele-ot-iconselector)
```

###  Alternatives

[friendsoftypo3/content-blocks

TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML

101466.4k45](/packages/friendsoftypo3-content-blocks)[wazum/sluggi

TYPO3 extension for URL slug management with inline editing, auto-sync, locking, access control, and redirects

41515.2k](/packages/wazum-sluggi)[praetorius/vite-asset-collector

Use AssetCollector to embed frontend assets generated by vite

54299.7k1](/packages/praetorius-vite-asset-collector)[typo3/cms-redirects

TYPO3 CMS Redirects - Create manual redirects, list existing redirects and automatically createredirects on slug changes.

167.3M74](/packages/typo3-cms-redirects)[typo3/cms-sys-note

TYPO3 CMS System Notes - Records with messages which can be placed on any page and contain instructions or other information related to a page or section.

116.2M37](/packages/typo3-cms-sys-note)[b13/assetcollector

Asset collector - Add CSS and SVG files and strings as inline style tag/inline svg to the html code.

10123.2k](/packages/b13-assetcollector)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)