PHPackages blueways/bw-icons - 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. blueways/bw-icons ActiveTypo3-cms-extension blueways/bw-icons ================= TYPO3-Extension that adds a icon form element 4.3.1(2mo ago)487.6k—5.3%6[9 PRs](https://github.com/maikschneider/bw_icons/pulls)4GPL-2.0-or-laterPHPPHP ^8.2CI passing Since Aug 23Pushed 1mo ago3 watchersCompare [ Source](https://github.com/maikschneider/bw_icons)[ Packagist](https://packagist.org/packages/blueways/bw-icons)[ RSS](/packages/blueways-bw-icons/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (49)Versions (60)Used By (4) [![Extension icon](Resources/Public/Icons/Extension.svg)](Resources/Public/Icons/Extension.svg) TYPO3 extension `bw_icons` ========================== [](#typo3-extension-bw_icons) [![Latest version](https://camo.githubusercontent.com/34e711c2c7df2146888caab8f59db1a406aba03202f7bc84bca338f9ab01ba64/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f69636f6e732f76657273696f6e2f736869656c64732e737667)](https://camo.githubusercontent.com/34e711c2c7df2146888caab8f59db1a406aba03202f7bc84bca338f9ab01ba64/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f69636f6e732f76657273696f6e2f736869656c64732e737667)[![Supported TYPO3 versions](https://camo.githubusercontent.com/d94744dc3db59b705c2f7f2ba9d55f2563d0222b6b1b7d3b4c1677e29df6fced/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f69636f6e732f7479706f332f736869656c64732e737667)](https://extensions.typo3.org/extension/bw_icons)[![Total downloads](https://camo.githubusercontent.com/cb6a6bf6d67c663965b38e321aff5f17483d999b91f5764807b8419b515b52b5/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f69636f6e732f646f776e6c6f6164732f736869656c64732e737667)](https://camo.githubusercontent.com/cb6a6bf6d67c663965b38e321aff5f17483d999b91f5764807b8419b515b52b5/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f69636f6e732f646f776e6c6f6164732f736869656c64732e737667)[![TYPO3 extension](https://camo.githubusercontent.com/0517d834d6ee7f22d55a26148a55bae01b97f3f5c4b3089fe984eb075b99a276/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f69636f6e732f657874656e73696f6e2f736869656c64732e737667)](https://extensions.typo3.org/extension/bw_icons)[![Composer](https://camo.githubusercontent.com/1c2a548e507bdc1c4153cf5d2d336030b7e320442322061c81b30324ad3645aa/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f69636f6e732f636f6d706f7365722f736869656c64732e737667)](https://packagist.org/packages/blueways/bw-icons)[![codecov](https://camo.githubusercontent.com/d55794c031bb862083033b953a854e76b8c10917d906b6097ce9c5d7454e26fc/68747470733a2f2f636f6465636f762e696f2f67682f6d61696b7363686e65696465722f62775f69636f6e732f6272616e63682f6d61696e2f67726170682f62616467652e7376673f746f6b656e3d434c41383132324e424a)](https://codecov.io/gh/maikschneider/bw_icons) Icon picker for TCA and RTE. Generates a browsable gallery of your icon fonts and SVGs - just link your stylesheet or image directory. Works with FontAwesome, Bootstrap, Icomoon.. Optionally adds icon field to pages, tt\_content or sys\_category. [![Backend Form](Documentation/Images/backend1.jpg)](Documentation/Images/backend1.jpg) [![RTE](Documentation/Images/RTE.jpg)](Documentation/Images/RTE.jpg) Demo ---- [](#demo) [![Video preview](Documentation/Images/preview.gif)](Documentation/Images/preview.gif) Features -------- [](#features) - icon picker form element - icon field for tt\_content, pages and sys\_category - RTE plugin - icon gallery with filter function - displays icons from image files or font (css) - extracts and caches font styles (css) - works with remote css files - can include generated stylesheet in the frontend Pro tip: Use your Icomoon development file. Your Icon Picker is always up to date, and you can serve the font files from your own remote without manually downloading and adjusting paths! Install ------- [](#install) ### Composer [](#composer) ``` composer require blueways/bw-icons ``` ### TER [](#ter) [![TER version](https://camo.githubusercontent.com/34e711c2c7df2146888caab8f59db1a406aba03202f7bc84bca338f9ab01ba64/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f69636f6e732f76657273696f6e2f736869656c64732e737667)](https://extensions.typo3.org/extension/bw_icons) Download the zip file from [TYPO3 extension repository (TER)](https://extensions.typo3.org/extension/bw_icons). Setup ----- [](#setup) 1. Update database schema 2. Include PageTS Enable the extension in the Extension Manager and include the **static PageTS** for TYPO3 core icons or set up your own icons. See *Configuration*section. 3. Enable icons for tt\_content, pages and/or sys\_category In the extension settings (`Admin Tools → Extension Configuration → bw_icons`), you can enable the icon fields. If you want to use it for other tables, see *For developers*section. 4. Include RTE configuration (optional) ``` imports: - { resource: EXT:bw_icons/Configuration/RTE/IconPicker.yaml } editor: config: toolbar: - { name: 'icon', items: [IconPicker] } ``` Configuration ------------- [](#configuration) The displayed icons are set up via PageTS. Choose a unique identifier and select `FileIconProvider` if you want to add image files from a directory or `CssIconProvider` if you want to display font icons from a stylesheet. ``` mod.tx_bwicons { # Get icons from directory and subdirectory. Subdirectories become sidebar links. typo3icons = Blueways\BwIcons\Provider\FileIconProvider typo3icons { title = TYPO3 Icons folder = EXT:core/Resources/Public/Icons/T3Icons/svgs } # Get icons from stylesheet. Multiple font-faces in one file become sidebar links. fontawesome = Blueways\BwIcons\Provider\CssIconProvider fontawesome { title = FontAwsome file = fileadmin/fontawesome/css/all.css } # Get icons from remote stylesheet. Styles and font files are cached in /typo3temp icomoon = Blueways\BwIcons\Provider\CssIconProvider icomoon { title = Icomoon file = https://i.icomoon.io/public/b23ec64zea/Project/style.css # optional: adjust markup in backend wizard # defaults to markup = } } ``` After changing the settings, make sure to clear the cache. ### RTE Configuration [](#rte-configuration) After importing the yaml configuration, you can add the new button anywhere you want to your RTE present. [Read more](https://docs.typo3.org/c/typo3/cms-rte-ckeditor/main/en-us/Configuration/)about RTE configuration. ``` imports: - { resource: EXT:bw_icons/Configuration/RTE/IconPicker.yaml } editor: config: toolbar: items: - IconPicker ``` Usage ----- [](#usage) The icons are saved as filename ( e.g. `EXT:myext/Resources/Public/Images/icon.svg` or `fileadmin/icons/foo.png`) if you use the `FileIconProvider` or as css class names ( e.g. `fas fa-arrow-right`) by using `CssIconProvider`. If you have configured only the selection of SVGs, you can safely use the `` viewHelper in your fluid template. By only using font icons, you can output like ``. If you have a mixture, you can use my ViewHelper that determines the type by checking for a dot in the icon name: ``` {namespace bw=Blueways\BwIcons\ViewHelpers} Hello world! ``` Output: ``` Hello world! ``` or ``` Hello world! ``` ### CSS Frontend Include [](#css-frontend-include) If you want to include the extracted styles in the frontend, you can use the `CssUtility` to generate the style-tags in the head of your page. Include this in your **TypoScript setup**: ``` page.headerData { 123 = USER 123.userFunc = Blueways\BwIcons\Utility\CssUtility->includeStyleSheets } ``` For developers -------------- [](#for-developers) ### Usage in other tables [](#usage-in-other-tables) 1. Create database field for the icon: ``` create table tx_myext_domain_model_foo ( icon_field varchar(255) not null default '', ); ``` 2. Edit TCA: Add the renderType `iconSelection` in the config array: ``` ... 'icon_field' => [ 'label' => 'My Icon', 'config' => [ 'type' => 'input', 'renderType' => 'iconSelection' ] ], ... ``` Optional: you may restrict which icon providers are available: ``` ... 'icon_field' => [ 'label' => 'My Icon', 'config' => [ 'type' => 'input', 'renderType' => 'iconSelection', 'iconProviders' => 'fontawesome,otherProviderKey', ], ], ... ``` ### New icon sources [](#new-icon-sources) If you want to add other icon sources (e.g. from API), you can create your own IconProvider. Just make sure to extend from `Blueways\BwIcons\Provider\AbstractIconProvider`. License ------- [](#license) This project is licensed under [GNU General Public License 2.0 (or later)](LICENSE.md). Contribute ---------- [](#contribute) This extension was made by Maik Schneider: Feel free to contribute! - [Github-Repository](https://github.com/maikschneider/bw_icons) Thanks to [blueways](https://www.blueways.de/) and [XIMA](https://www.xima.de/)! ### Health Score 59 — FairBetter than 99% of packages Maintenance86 Actively maintained with recent releases Popularity38 Limited adoption so far Community23 Small or concentrated contributor base Maturity77 Established project with proven stability Bus Factor1 Top contributor holds 81.4% 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 Every ~44 days Recently: every ~35 days Total 38 Last Release 88d ago Major Versions v0.9.0 → v1.0.02021-08-24 v1.4.0 → v2.0.02022-09-18 v2.1.8 → 3.0.02024-06-13 3.1.1 → 4.0.02025-06-03 4.3.0 → v14.x-dev2026-02-17 PHP version history (2 changes)3.0.0PHP ^8.0 4.2.0PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/04b105eb2ade5d364c2ae93a9a012d591594eaa3ad54d252db70856d1c293d5d?d=identicon)[m.schneider](/maintainers/m.schneider) --- Top Contributors [![maikschneider](https://avatars.githubusercontent.com/u/696865?v=4)](https://github.com/maikschneider "maikschneider (433 commits)")[![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4)](https://github.com/renovate[bot] "renovate[bot] (89 commits)")[![Jeggle-s](https://avatars.githubusercontent.com/u/38358202?v=4)](https://github.com/Jeggle-s "Jeggle-s (4 commits)")[![pipaltree](https://avatars.githubusercontent.com/u/2978136?v=4)](https://github.com/pipaltree "pipaltree (2 commits)")[![xperseguers](https://avatars.githubusercontent.com/u/646805?v=4)](https://github.com/xperseguers "xperseguers (2 commits)")[![rubsilv](https://avatars.githubusercontent.com/u/39330651?v=4)](https://github.com/rubsilv "rubsilv (1 commits)")[![moritz-ngo](https://avatars.githubusercontent.com/u/102583924?v=4)](https://github.com/moritz-ngo "moritz-ngo (1 commits)") --- Tags typo3typo3-cms-extensioniconsextensiontypo3 ### Code Quality TestsCodeception Code StylePHP CS Fixer ### Embed Badge ![Health badge](/badges/blueways-bw-icons/health.svg) ``` [![Health](https://phpackages.com/badges/blueways-bw-icons/health.svg)](https://phpackages.com/packages/blueways-bw-icons) ``` ### Alternatives [quellenform/t3x-iconpack Provides an iconpack-registry for custom iconpacks. 1542.7k25](/packages/quellenform-t3x-iconpack) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)