PHPackages chkilel/icones-plugin - 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. [Image & Media](/categories/media) 4. / 5. chkilel/icones-plugin ActiveOctober-plugin[Image & Media](/categories/media) chkilel/icones-plugin ===================== Access thousands of icons including popular icon sets, icon fonts and several Emoji sets from a backed Form Widget v4.0.0(1mo ago)181.7k↓88.2%5[1 issues](https://github.com/chkilel/icones-plugin/issues)MITPHPPHP >=8.2 Since Aug 22Pushed 1mo ago2 watchersCompare [ Source](https://github.com/chkilel/icones-plugin)[ Packagist](https://packagist.org/packages/chkilel/icones-plugin)[ Docs](https://github.com/chkilel/icones-plugin)[ RSS](/packages/chkilel-icones-plugin/feed)WikiDiscussions main Synced today READMEChangelog (10)Dependencies (8)Versions (17)Used By (0) Icônes Form Widget 🪄 🎉 🎊 ======================== [](#icônes-form-widget----) \[📖 **Release Notes**\] > ℹ️ **Plugin version 3 is compatible only with Octobercms 3 (New Ajax framwork and the backend upgrade to bootstrap 5), please use version 2 of the plugin for OCMS 1 and 2.****You cannot upgrade from version `1.*/2.*` to `3.*`** --- Access thousands of SVG icons as a backend form widget. One library, over **133,000** vector icons, Modern replacement for icon fonts. Fast, easy to use. - **128+** icon sets powered by [Iconify](https://iconify.design/) - Browse the icons on [Iconify](https://icon-sets.iconify.design/) or on [Icônes](https://icones.netlify.app/) [![Icônes FormWidget](https://camo.githubusercontent.com/d2f1c2e97b162afe5dd462c44e1900c18d43995c0fddc35c5d4f8c13298fb5aa/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393835323334382f69636f6e65732d706c7567696e2f524541444d452f49636f6e657346696e6465722d64656d6f5f6b797a7461752e676966)](https://camo.githubusercontent.com/d2f1c2e97b162afe5dd462c44e1900c18d43995c0fddc35c5d4f8c13298fb5aa/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393835323334382f69636f6e65732d706c7567696e2f524541444d452f49636f6e657346696e6465722d64656d6f5f6b797a7461752e676966) Advantages of this form widget ------------------------------ [](#advantages-of-this-form-widget) Every time I use icon fonts, end users don't find them appealing, or even they don't find what they want. Styling was challenging, with SVG icons you can apply classes and style them as you want. There are many excellent icon sets available, some are available only as fonts and almost all of them load entire set even if you are displaying just few icons. Icônes combines all those icon sets (more than 100) that makes it possible to use many icons from different icon sets on same page or in same application using one form widget. Icônes combines pixel perfect rendering of SVG with ease of use of glyph fonts, while offering more choice than any glyph font. You don't need to load any dependency at all. You can use Font Awesome, Material Design Icons, Unicons, Dashicons, Emoji, ... and many other icon sets on same page or application using one form widget. **TOC** - [Icônes Form Widget 🪄 🎉 🎊](#ic%C3%B4nes-form-widget----) - [Advantages of this form widget](#advantages-of-this-form-widget) - [Upgrading from version `1.*` to `2.*` 🚨](#upgrading-from-version-1-to-2-) - [Installation](#installation) - [Composer](#composer) - [How to use](#how-to-use) - [Field Options](#field-options) - [Form field showName option](#form-field-showname-option) - [Form field showIconSetName option](#form-field-showiconsetname-option) - [Form field size option](#form-field-size-option) - [Form field iconSets option](#form-field-iconsets-option) - [Settings](#settings) - [Permissions](#permissions) - [Usage in Twig template](#usage-in-twig-template) - [Twig filter options](#twig-filter-options) - [Options detail](#options-detail) - [Usage in PHP](#usage-in-php) - [Usage in Backend List](#usage-in-backend-list) Upgrading from version `1.*` to `2.*` 🚨 --------------------------------------- [](#upgrading-from-version-1-to-2-) Icônes Form Widget 2.0 depend on version 2 of [Iconify Icon Sets](https://github.com/iconify/icon-sets). If you are upgrading from version 1.\* , you need to upgrade your Iconify Icon Sets to version 2.\* also. For that, run the following command in the root of your project: ``` composer require chkilel/icones-plugin --with-all-dependencies # --with-all-dependencies will upgrade all dependencies also ``` then migrate the database: ``` php artisan october:up ``` Installation ------------ [](#installation) Simply install the plugin from the marketplace, if you run into problems because of composer dependencies, please use composer. ### Composer [](#composer) If you prefer Composer or you run into problems when installing from the marketplace, run the following commands in the project’s root directory: ``` composer require chkilel/icones-plugin:^2.0.0 # For Octobercms 1 and 2 # ℹ️ OR composer require chkilel/icones-plugin:^3.0.0 # For Octobercms 3 # Then php artisan october:up ``` How to use ---------- [](#how-to-use) Icones registers a new backend form widget named `iconesfinder`. You can access the Form Widget in your model's fields.yaml file or as **Custom Page Fields** for [static pages](https://github.com/rainlab/pages-plugin/blob/master/docs/documentation.md#custom-page-fields) by using `iconesfinder` as the field type. - Usage example via yaml config: ``` my_awesome_icon: label: My super awesome icon type: iconesfinder showName: true showIconSetName: true size: large placeholder: -- Choose your icon -- iconSets: # Icon sets to choose from, the icon sets must be enabled in the settings area - mdi # Material Design Icons - ant-design # Ant Design Icons - emojione # Emoji One (Colored) - logos # SVG Logos ``` - Usage example via Custom page fields for [Pages plugin](https://github.com/rainlab/pages-plugin/blob/master/docs/documentation.md#custom-page-fields): ``` {variable type="iconesfinder" name="my_awesome_icon" label="My awesome icon" showName="true" showIconSetName="true" size="large" iconSets="mdi|ant-design|emojione|logos|pages" placeholder="My placeholder" tab="My tab name" placement="secondary" }{/variable} ``` > Please pay attention to the spaces for **Custom Page Fields**, there is no space between the **option**, the **equal sign** `=` and the **value** Field Options ------------- [](#field-options) For each field you can specify these options: OptionDescriptionDefault if not set**showName****Optional**: Show the name of the **icon** beside the SVG in the field. Options: true, false.true**showIconSetName****Optional**: Show the name of the **icon set** beside the SVG in the field. Options: true, false.true**iconSets****Optional**: (abbreviated name of the icon set). Define the icon sets to choose from, the icon sets must be enable in the setting area. see [available icon sets](#form-field-iconSets-option) bellow for available options. *If it's not set, the user can choose from all enabled icon sets.*All enabled icon sets in the settings area**size****Optional**: Specifies the field size. Options: small, large.Normal size**placeholder****Optional**: The text to show when nothing is selected.-- Choose an icon -- *Translated string*.### Form field showName option [](#form-field-showname-option) Show the name of the icon in the field. ValueAppearancetrue[![showName set to true](https://camo.githubusercontent.com/81643020ac628c2105a6fd93c2e84ca6f4ec96a3801724be8db0b10c91acbcc4/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538332f69636f6e65732d706c7567696e2f524541444d452f776974682d6e616d655f71707065366c2e6a7067)](https://camo.githubusercontent.com/81643020ac628c2105a6fd93c2e84ca6f4ec96a3801724be8db0b10c91acbcc4/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538332f69636f6e65732d706c7567696e2f524541444d452f776974682d6e616d655f71707065366c2e6a7067)false[![showName set to false](https://camo.githubusercontent.com/9ef2cae0ad0dcffa2cc0afb015db9450c080f110ba6a7ae37f82037fe35e73d9/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538322f69636f6e65732d706c7567696e2f524541444d452f776974686f75742d6e616d655f6b6d74757a382e6a7067)](https://camo.githubusercontent.com/9ef2cae0ad0dcffa2cc0afb015db9450c080f110ba6a7ae37f82037fe35e73d9/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538322f69636f6e65732d706c7567696e2f524541444d452f776974686f75742d6e616d655f6b6d74757a382e6a7067)### Form field showIconSetName option [](#form-field-showiconsetname-option) Show the name of the icon set in the field. ValueAppearancetrue[![showIconSetName set to true](https://camo.githubusercontent.com/de1b0fa39833a0133b6c6dabafb5b194cdab2cd585b6603c5e1232566407b51e/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538332f69636f6e65732d706c7567696e2f524541444d452f776974682d69636f6e2d7365742d6e616d655f6476776e30672e6a7067)](https://camo.githubusercontent.com/de1b0fa39833a0133b6c6dabafb5b194cdab2cd585b6603c5e1232566407b51e/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538332f69636f6e65732d706c7567696e2f524541444d452f776974682d69636f6e2d7365742d6e616d655f6476776e30672e6a7067)false[![showIconSetName set to false](https://camo.githubusercontent.com/ce7e20d0fbf07aa6df9a7ea9f05690302f3abb54fbbabec9b65d91fe35830d48/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538302f69636f6e65732d706c7567696e2f524541444d452f776974686f75742d69636f6e2d7365742d6e616d655f65796e707a712e6a7067)](https://camo.githubusercontent.com/ce7e20d0fbf07aa6df9a7ea9f05690302f3abb54fbbabec9b65d91fe35830d48/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538302f69636f6e65732d706c7567696e2f524541444d452f776974686f75742d69636f6e2d7365742d6e616d655f65796e707a712e6a7067)### Form field size option [](#form-field-size-option) Set the size of the field. ValueAppearancesmall[![small field size](https://camo.githubusercontent.com/ff2b7de23aada2c7a7bdb204b1861b60c1f1428111b74300cd9fc76ceec627f0/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538322f69636f6e65732d706c7567696e2f524541444d452f736d616c6c5f616668676f622e6a7067)](https://camo.githubusercontent.com/ff2b7de23aada2c7a7bdb204b1861b60c1f1428111b74300cd9fc76ceec627f0/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538322f69636f6e65732d706c7567696e2f524541444d452f736d616c6c5f616668676f622e6a7067)(Defaul if not set)[![narmal field size](https://camo.githubusercontent.com/16fed846356b62d3837054fa0a6dff59e62d5b7d1cec675c9c095f88d4fb73ee/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538312f69636f6e65732d706c7567696e2f524541444d452f6e6f726d616c5f6a766d6f6f792e6a7067)](https://camo.githubusercontent.com/16fed846356b62d3837054fa0a6dff59e62d5b7d1cec675c9c095f88d4fb73ee/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538312f69636f6e65732d706c7567696e2f524541444d452f6e6f726d616c5f6a766d6f6f792e6a7067)large[![large field size](https://camo.githubusercontent.com/f33f666e934ab1d26ee118126712fcc7ab3bb2ecdaf80cd6f15fb422385bc35c/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538312f69636f6e65732d706c7567696e2f524541444d452f6c617267655f6b6e717764362e6a7067)](https://camo.githubusercontent.com/f33f666e934ab1d26ee118126712fcc7ab3bb2ecdaf80cd6f15fb422385bc35c/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538312f69636f6e65732d706c7567696e2f524541444d452f6c617267655f6b6e717764362e6a7067)### Form field iconSets option [](#form-field-iconsets-option) For `iconSets` option, you can choose one or more from the possible values below, if not set, the user can choose from all enabled icon sets in the backend settings: Possible valuesIcon set real nameTotal iconsacademiconsAcademicons149akar-iconsAkar Icons398ant-designAnt Design Icons789arcticonsArcticons4304biBootstrap Icons1668bpmnBPMN112brandicoBrandico45bxBoxIcons797bxlBoxIcons Logo153bxsBoxIcons Solid650bytesizeBytesize Icons101carbonCarbon1798charmCharm Icons255cicoolicons412cibCoreUI Brands830cifCoreUI Flags199cilCoreUI Free554circle-flagsCircle Flags349clarityClarity1103codiconCodicons413cryptocurrencyCryptocurrency Icons471dashiconsDashicons342eiEvil Icons70elElusive Icons304emojioneEmoji One (Colored)1834emojione-monotoneEmoji One (Monotone)1403emojione-v1Emoji One (v1)1262entypoEntypo+321entypo-socialEntypo+ Social76eos-iconsEOS Icons253epElement Plus283etElegant100evaEva Icons490faFont Awesome 4678fa-brandsFont Awesome 5 Brands457fa-regularFont Awesome 5 Regular151fa-solidFont Awesome 5 Solid1001fa6-brandsFont Awesome Brands462fa6-regularFont Awesome Regular162fa6-solidFont Awesome Solid1387fadFontAudio155feFeather Icon255featherFeather Icons286file-iconsFile Icons930flagFlag Icons530flagpackFlagpack255flat-color-iconsFlat Color Icons329flat-uiFlat UI Icons100fluentFluent UI System Icons11468fontelicoFontelico34fontistoFontisto615foundationFoundation283fxemojiFirefox OS Emoji1034galaGala Icons51geoGeoGlyphs30ggcss.gg704gisFont-GIS344gridiconsGridicons201grommet-iconsGrommet Icons614healthiconsHealth Icons1731heroicons-outlineHeroIcons Outline230heroicons-solidHeroIcons Solid230icGoogle Material Icons10945icomoon-freeIcoMoon Free491icon-parkIconPark2657icon-park-outlineIconPark Outline2657icon-park-solidIconPark Solid1937icon-park-twotoneIconPark TwoTone1915iconoirIconoir1151icons8Icons8 Windows 10 Icons234ilIcalicons84ionIonIcons1332iwwaInnowatio Font105jamJam Icons940laLine Awesome1544line-mdMaterial Line Icons298logosSVG Logos1438lsLigature Symbols348lucideLucide625majesticonsMajesticons760makiMaki208mapMap Icons167material-symbolsMaterial Symbols8001mdiMaterial Design Icons7001mdi-lightMaterial Design Light267medical-iconMedical Icons144miMono Icons180mono-iconsMono Icons180nimbusNimbus135notoNoto Emoji3418noto-v1Noto Emoji (v1)2157octiconOcticons506oiOpen Iconic223oouiOOUI322openmojiOpenMoji4053pepiconsPepicons410phPhosphor6282pixelarticonsPixelarticons474primePrime Icons238psPrestaShop Icons479quillQuill Icons140radix-iconsRadix Icons318raphaelRaphael266riRemix Icon2271si-glyphSmartIcons Glyph799simple-iconsSimple Icons2263simple-line-iconsSimple line icons189subwaySubway Icon Set306system-uiconsSystem UIcons430tablerTabler Icons2016teenyiconsTeenyicons1200topcoatTopCoat Icons89twemojiTwitter Emoji3668typcnTypicons336uilUnicons1206uimUnicons Monochrome296uisUnicons Solid189uitUnicons Thin Line214uiwuiw icons214vaadinVaadin Icons636vsVesper Icons159vscode-iconsVSCode Icons1139websymbolWeb Symbols Liga85whhWebHostingHub Glyphs2125wiWeather Icons219wpfIcons8 Windows 8 Icons200zmdiMaterial Design Iconic Font777zondiconsZondicons297**Total icons for all icon sets****133 348**Settings ======== [](#settings) After installation, go to `Backend > Settings >icones` or type **icones** in the search field. Initially, none of the icon sets is installed, you need to install the icon sets you want to allow the end user to use. [![Setting page](https://camo.githubusercontent.com/285b8280489ac2658ec204d0036b93720ca1635503a9396147e7c604f237fb13/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538392f69636f6e65732d706c7567696e2f524541444d452f73657474696e672d706167655f73336e786c632e706e67)](https://camo.githubusercontent.com/285b8280489ac2658ec204d0036b93720ca1635503a9396147e7c604f237fb13/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538392f69636f6e65732d706c7567696e2f524541444d452f73657474696e672d706167655f73336e786c632e706e67) - You can enable installed icon sets: [![Disable icon set](https://camo.githubusercontent.com/2b0955672d20d9d887cb2f7c68a786ce445ddd3112ddacdc6e0ae64beb8d838d/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538302f69636f6e65732d706c7567696e2f524541444d452f73657474696e672d64697361626c65645f696e717638712e706e67)](https://camo.githubusercontent.com/2b0955672d20d9d887cb2f7c68a786ce445ddd3112ddacdc6e0ae64beb8d838d/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538302f69636f6e65732d706c7567696e2f524541444d452f73657474696e672d64697361626c65645f696e717638712e706e67) - Disable enabled ones: [![Enable icon set](https://camo.githubusercontent.com/5c9dc10be1cafadd4d1355988429795e071f32a992f2ea48aa6a62036a608e68/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538302f69636f6e65732d706c7567696e2f524541444d452f73657474696e672d656e61626c65645f7762737432762e706e67)](https://camo.githubusercontent.com/5c9dc10be1cafadd4d1355988429795e071f32a992f2ea48aa6a62036a608e68/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538302f69636f6e65732d706c7567696e2f524541444d452f73657474696e672d656e61626c65645f7762737432762e706e67) - Or completely delete an icon set. > Please note that to delete an icon set, you need to disable it first. [![Disabled icon sets cannot be deleted](https://camo.githubusercontent.com/d5fda81b41c062c62adcfaa4bbe435035601f1ef5ac7de9becdc46c257914667/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538362f69636f6e65732d706c7567696e2f524541444d452f73657474696e672d63616e6e6f742d64656c6574652d656e61626c65645f7165757163352e706e67)](https://camo.githubusercontent.com/d5fda81b41c062c62adcfaa4bbe435035601f1ef5ac7de9becdc46c257914667/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538362f69636f6e65732d706c7567696e2f524541444d452f73657474696e672d63616e6e6f742d64656c6574652d656e61626c65645f7165757163352e706e67) Permissions ----------- [](#permissions) The plugin registers two backend permissions to manage Icônes. - **Access Icônes settings** : allow the user to enable and/or disable icon sets. - **Manage icon sets installation end deletion** : allow the user to install and/or delete icon sets. [![Icône permissions](https://camo.githubusercontent.com/5f6093b3d4c29174179c854e204b3c86631ac04772eb732534597a786b512186/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538312f69636f6e65732d706c7567696e2f524541444d452f7065726d697373696f6e735f68676e696c392e706e67)](https://camo.githubusercontent.com/5f6093b3d4c29174179c854e204b3c86631ac04772eb732534597a786b512186/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538312f69636f6e65732d706c7567696e2f524541444d452f7065726d697373696f6e735f68676e696c392e706e67) Usage in Twig template ---------------------- [](#usage-in-twig-template) Icônes plugin register a new filter `iconify()` to use in your templates, the filter generate an SVG icon. ### Twig filter options [](#twig-filter-options) `iconify` filter optionally accept an object with `key:value` paires to generate the SVG. It will use default if used as `{{ my_var|iconify }}` without providing any parameter, The options to use are listed below. Examples of usages: ``` {{ my_var|iconify }} {# Default options from stored value #} {{ my_var|iconify({'height': '24px', 'class':'w-10 h-10' }) }} {{ my_var | iconify({ 'height' : '24px', 'width' : '24px', 'align' : 'center,middle,meet', 'color' : '#ff8000', 'rotate' : '90deg', // same as "'rotate' => 1" or "'rotate' => '25%'" 'flip' : 'horizontal', // same as "'hFlip' => true" 'box' : true }); }} {# Height and width will be set from viewBox attribute, using original icon's dimensions#} {{ my_var | iconify({ 'height' => 'auto'}) }} ``` #### Options detail [](#options-detail) KeyDescriptionDefaultOptionsclassThe css class to apply to the svg tagCSS class to applywidth, heightDimensions of icon. If only one attribute is set, another attribute will be set using icon's width/height ratio. If value is "auto", icon's original dimensions will be used. If both width and height are not set, height defaults to "1em"."1em"String such as "1em", "24px" or number.hFlip, vFlipFlip icon horizontally and/or vertically.falsetrue or "true" or "1" (string or boolean),flipAlternative to "hFlip" and "vFlip"String, value can be "horizontal", "vertical" or "horizontal,vertical"rotateRotation.Value can be in degrees "90deg" (only 90, 180 and 270 rotations are available), percentages "25%" (25%, 50% and 75% are aliases of 90deg, 180deg and 270deg) or number 1-3 (1 - 90deg, 2 - 180deg, 3 - 270deg).inlineIf true, code will include vertical-align style, making it behave like a glyph.falsetrue or "true" or "1" (string or boolean),colorcustom color string to replace currentColor. This is useful when using icon as background image because background image cannot use currentColorboxIf true, icon will include extra rectangle matching its view box.falsetrue or "true" or "1" (string or boolean)alignAlignment. This is useful if you have custom width and height set. Unlike other images, SVG keep aspect ratio (unless stated otherwise) when scaled. Value is comma or space separated string with possible strings (example: "left,top,crop"):\[ left, right, center -> horizontal alignment \], \[top, middle, bottom -> vertical alignment\], \[crop -> crop parts that go outside of boundaries\], \[meet -> scale icon down to fit entire icon (opposite of crop)\]Usage in PHP ------------ [](#usage-in-php) The icônes plugin value can also be used easily in PHP, with the obove options as follows: ``` use Chkilel\Icones\Classes\JsonIcon; $icon = new JsonIcon($value); $icon->iconify(['inline'=>true, 'height'=>36]); ``` Usage in Backend List --------------------- [](#usage-in-backend-list) The icônes plugin can also be used on backend lists, it defines a new Column Types `iconesthumb` with the option to give a **height** (in px) to the output, e.g. ``` icon: label: My awesome icon type: iconesthumb height: 36 ``` [![iconesthumb Column types with height option](https://camo.githubusercontent.com/a5f277b55ae5bd8ce4015d3e9f9649ae0f7dce64207609ffac659a029f5c8caa/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538322f69636f6e65732d706c7567696e2f524541444d452f636f6c756d6e2d74797065732d776974682d6865696768745f7739376667622e706e67)](https://camo.githubusercontent.com/a5f277b55ae5bd8ce4015d3e9f9649ae0f7dce64207609ffac659a029f5c8caa/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313632393538313538322f69636f6e65732d706c7567696e2f524541444d452f636f6c756d6e2d74797065732d776974682d6865696768745f7739376667622e706e67) ### Health Score 54 — FairBetter than 96% of packages Maintenance88 Actively maintained with recent releases Popularity28 Limited adoption so far Community14 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor1 Top contributor holds 93.9% 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 ~143 days Recently: every ~364 days Total 13 Last Release 57d ago Major Versions v1.0.5 → v2.0.02022-05-12 v2.x-dev → v3.0.02022-06-26 v3.1.0 → v4.0.02026-05-07 PHP version history (2 changes)v1.0.0PHP >=7.0 v4.0.0PHP >=8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/a78805e5a9c5daac29b427fd8914f1e73d243b04fee15a3d422b2b4b91540ab6?d=identicon)[chkilel](/maintainers/chkilel) --- Top Contributors [![chkilel](https://avatars.githubusercontent.com/u/17153244?v=4)](https://github.com/chkilel "chkilel (46 commits)")[![vse-prosto](https://avatars.githubusercontent.com/u/25720008?v=4)](https://github.com/vse-prosto "vse-prosto (2 commits)")[![mariavilaro](https://avatars.githubusercontent.com/u/10522884?v=4)](https://github.com/mariavilaro "mariavilaro (1 commits)") --- Tags iconifyiconslaraveloctoberoctobercmsoctobercms-pluginsvg-iconswinterwintercmswintercms-pluginsvgiconoctobercmsiconifyicones ### Embed Badge ![Health badge](/badges/chkilel-icones-plugin/health.svg) ``` [![Health](https://phpackages.com/badges/chkilel-icones-plugin/health.svg)](https://phpackages.com/packages/chkilel-icones-plugin) ``` ### Alternatives [picqer/php-barcode-generator An easy to use, non-bloated, barcode generator in PHP. Creates SVG, PNG, JPG and HTML images from the most used 1D barcode standards. 1.8k28.4M117](/packages/picqer-php-barcode-generator)[helsingborg-stad/municipio A bootstrap theme for creating municipality sites. 4028.5k10](/packages/helsingborg-stad-municipio)[lasserafn/php-initial-avatar-generator A package to generate avatars with initials for PHP 4404.4M17](/packages/lasserafn-php-initial-avatar-generator)[yzalis/identicon Generate unique identicon avatars from any string 6101.2M23](/packages/yzalis-identicon)[jkphl/iconizr A PHP command line tool for converting SVG images to a set of CSS icons (SVG & PNG, single icons and / or CSS sprites) with support for image optimization and Sass output 4869.0k](/packages/jkphl-iconizr)[mindkomm/timmy Advanced image manipulation for Timber. 17737.8k](/packages/mindkomm-timmy) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)