Can you add more icon choices to the list of document type icons?

According to the documentation here https://docs.umbraco.com/umbraco-cms/customizing/foundation/icons
Umbraco uses “Lucide icons”.

Lucide webpage shows 1557 different icons but Umbraco is using a subset of these found here:

Is it possible to expand the available selection somehow? Either to get the full icon set from Lucide, or possibly adding your own?

1 Like

Hi Karl :waving_hand:

Yes, it is indeed possible (or was before - haven’t tried in anything above v13) - watch how Warren does it here:

/Chriztian

3 Likes

It’s a bit different in the new backoffice. They have their own extension point, so you have to create an extension, and can’t just drop them in a folder.

2 Likes

There’s also an icon pack available:

You could look at the source of that one to help make your own pack.

1 Like

Wow - that seems weirdly complicated… :thinking:

I just tried the approach in the video and it does not seem to work in v15 at least. It seemed very easy, so a bit sad it’s not working.

There are more things to wire up in the new Backoffice, but I see no reason why we cannot get to a point where you can drop icons in a folder again. Meanwhile, this is a good package idea, if anyone wants to have a go at it.

I agree its overly complex now as you can’t drop a bunch of SVG in a common folder location like we used to.

1 Like

@warren
I am looking at your icon extension and trying to figure out how to make my own solution like this, with our own custom icons.

I notice there are two projects in the repo, one that ends in “.Website”. Looking at the csproj files it seems this might mainly be to have something visible to “test” that the icon extension is working , is that right?
Or would you need to have two projects set up to add icons?

What gives me pause is that both projects reference each other.

Umbraco.Community.IconPack.Iconoir.Website.csproj references Umbraco.Community.IconPack.Iconoir package.

But also Umbraco.Community.IconPack.Iconoir/client/public
/umbraco-package.json has "$schema": "../../../Umbraco.Community.IconPack.Iconoir.Website/umbraco-package-schema.json", so it’s like a circular dependency.

Yep exactly that its a test site to test the package

Nope there is no real need, just like you said its just for something to test with.

Yes I can understand your confusion.
So the Umbraco.Community.IconPack.Iconoir is the RCL Nuget Package that we actually bundle up and ship. It is added as a reference to the Website project to test the package and that the JS Assets & Files will load correctly.

The umbraco-package.json is then using the JSON schema from the test website which gets published/built with an Umbraco Site to help give some auto completions & ensure the JSON file for the package is defined correct.

In an ideal world Umbraco would have some public URLs for each and every version of Umbraco that we could consume directly such as https://umbraco.com/schemas/v15.1.0/umbraco-package-schema.json, rather than having to use the one that gets written to disk when you build your Umbraco site.

Grabbing a coffee but will see if I can write it up so its simpler to show what the bare minimum is needed.

As some of this stuff in this project is scripts to help automate certain tasks that I don’t want to do by hand.

1 Like

How to add a custom icon to Bellissima

The docs that Soren linked to above is doing this, but perhaps its not as easy to follow along with?

  • Create a folder called App_Plugins/MyCustomIcons
  • Create an umbraco-package.json file inside it
  • Use JSON to define an icon collection
  • Find an SVG to use
  • Copy SVG contents into a JS file and wrap with export default
  • Create JS file with an array of icon alias and the JS path to the SVG as a JS exported string

umbraco-package.json

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My Custom Icons",
  "id": "my.projectname.extensions.icons",
  "version": "1.0.0",
  "allowTelemetry": false,
  "extensions": [
    {
      "type": "icons",
      "alias": "my.projectname.icons",
      "name": "My Project Name Custom Icons",
      "js": "/App_Plugins/MyCustomIcons/my-custom-icons.js"
    }
  ]
}

Example High Five SVG Vector

export default `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125" x="0px" y="0px"><path class="cls-1" d="m61.7985059,18.5250595c-.2827148,0-.5703125-.0595703-.84375-.1875-1.0009766-.4667969-1.434082-1.65625-.9672852-2.6582031l4.0571289-8.7001953c.4672852-1.0009766,1.65625-1.4355469,2.6577148-.9667969,1.0009766.4667969,1.434082,1.65625.9672852,2.6582031l-4.0571289,8.7001953c-.3393555.7275391-1.0605469,1.1542969-1.8139648,1.1542969Z"/><path class="cls-1" d="m71.1959669,20.642247c-.6308594,0-1.2509766-.296875-1.6401367-.8525391-.6337891-.9052734-.4135742-2.1523438.4912109-2.7861328l9.7832031-6.8505859c.9057617-.6328125,2.1513672-.4130859,2.7851562.4912109.6337891.9052734.4135742,2.1523438-.4912109,2.7861328l-9.7832031,6.8505859c-.3491211.2441406-.7490234.3613281-1.1450195.3613281Z"/><path class="cls-1" d="m36.7086622,94.1764267c-.2827148,0-.5703125-.0595703-.84375-.1875-1.0009766-.4667969-1.434082-1.65625-.9672852-2.6582031l4.0571289-8.7001953c.4667969-1,1.6552734-1.4365234,2.6577148-.9667969,1.0009766.4667969,1.434082,1.65625.9672852,2.6582031l-4.0571289,8.7001953c-.3393555.7275391-1.0605469,1.1542969-1.8139648,1.1542969Z"/><path class="cls-1" d="m21.5924512,90.2096299c-.6308594,0-1.2509766-.296875-1.6401367-.8525391-.6337891-.9052734-.4135742-2.1523438.4912109-2.7861328l9.7832031-6.8505859c.9047852-.6337891,2.1518555-.4140625,2.7851562.4912109.6337891.9052734.4135742,2.1523438-.4912109,2.7861328l-9.7832031,6.8505859c-.3491211.2441406-.7490234.3613281-1.1450195.3613281Z"/><path class="cls-1" d="m91.7463209,75.6715439l-.0001831-21.5974121c-.000061-.0046387-.0012817-.0085449-.0012817-.0129395v-14.6989746c.0001831-2.0429688-1.656189-3.6994629-3.6993408-3.6994629-2.0424194.0026855-3.6988525,1.6567383-3.6990356,3.6994629,0,0-.0508423,16.6281738-.0513306,16.6428223-.0043945.1520996-.0256348.3015137-.0744629.4421387-.0018921.0053711-.0050049.0097656-.006897.0151367-.0475464.1318359-.1174927.2531738-.199707.3664551-.0148926.0205078-.0276489.0415039-.0435791.0610352-.0855103.1062012-.1860352.1989746-.2994385.2788086-.0233765.0168457-.0475464.0302734-.0719604.0454102-.1166382.0725098-.241394.1340332-.380188.1726074-.0042725.0012207-.0075684.0043945-.0118408.0053711-.0059814.001709-.0126953.0009766-.0187378.0024414-.1113281.0285645-.2224121.0407715-.3326416.0432129-.0113525.0002441-.0214844.0041504-.0328369.0041504-.0306396,0-.0592651-.0070801-.0894165-.0087891-.055542-.003418-.1104736-.0073242-.1647949-.0168457-.0448608-.0078125-.0875244-.0195312-.1309204-.0314941-.0484619-.0129395-.0963135-.0263672-.1429443-.0444336-.0443115-.0168457-.0863037-.0373535-.128479-.0583496-.0429077-.0214844-.085144-.0429688-.1257324-.0683594-.0395508-.0246582-.0762329-.0524902-.1130981-.0808105-.0388794-.029541-.0768433-.0593262-.1126709-.0927734-.0332031-.0310059-.0633545-.0644531-.0935669-.0986328-.0328979-.0368652-.0650635-.0739746-.0942993-.1142578-.0279541-.0385742-.052002-.0793457-.0762329-.1208496-.0237427-.0405273-.0473022-.0805664-.0673218-.1240234-.0222168-.0478516-.0393066-.0981445-.0563965-.1486816-.0101318-.0300293-.0250854-.0571289-.0333862-.0881348l-3.3777466-12.605957-.0006714.0002441-4.3881226-16.376709c-.4489136-1.675293-1.9543457-2.8952637-3.6361084-2.8952637-.1914062,0-.3851318.0158691-.5797729.048584-2.1856689.3676758-3.5315552,2.5185547-2.9716187,4.6079102l5.9642334,22.246582c.232605.8679199-.3571777,1.7626953-1.291626,1.8569336-.0459595.0046387-.0916138.0068359-.1369019.0068359-.6777344,0-1.2717285-.5070801-1.4505005-1.1745605l-1.5113525-5.6403809-.0042114.0009766-5.1951904-19.3886719c-.4428711-1.652832-1.937439-2.7426758-3.5706177-2.7426758-.4315186,0-.8728638.0761719-1.3068848.2380371-1.8101196.6750488-2.7277222,2.7070312-2.2277222,4.5732422l5.1540527,19.2351074-.0024414.0004883,1.5318604,5.7172852c.232605.8679199-.3571777,1.7626953-1.291687,1.8569336-.0459595.0046387-.0915527.0068359-.1369019.0068359-.6776733,0-1.2717285-.5073242-1.4505005-1.1748047l-6.1296387-22.8857422c-.4428711-1.652832-1.937561-2.7426758-3.5707397-2.7426758-.4315186,0-.8727417.0761719-1.3067017.2380371-1.8101196.6750488-2.7277832,2.7070312-2.2277832,4.5732422l4.7952881,17.8959961-.0073242-.0007324,1.3168945,4.9147949c.0075073.027832.0078735.0559082.0136719.0837402.010498.050293.0193481.1003418.0245361.1508789.0048218.0473633.0065308.0942383.0067749.1413574.0002441.0495605-.0010376.0981445-.0057373.1472168-.0045776.0471191-.0118408.0932617-.020874.1396484-.0091553.0473633-.0197754.09375-.0335083.1396484-.0133667.045166-.0291748.0883789-.0466309.1318359-.0181274.0446777-.0374756.0881348-.0598755.1308594-.0213013.0407715-.0446777.0800781-.0697632.1186523-.0264893.0410156-.0542603.0805664-.0847778.1191406-.0288086.0361328-.0593872.0698242-.0914917.1032715-.0336914.0349121-.0682373.0683594-.1054688.1000977-.0368652.03125-.0755005.0600586-.1156006.0878906-.0389404.0268555-.0783691.0524902-.1203003.0756836-.0447998.0251465-.0913696.046875-.1394653.0671387-.0256348.0109863-.0481567.0263672-.074707.0361328-.0400391.0153809-.0809326.0275879-.1217651.0385742-.0004883,0-.0008545.0002441-.0012817.0004883h-.0005493c-.0003662.0002441-.0008545.0002441-.0012207.0004883-.0949707.0253906-.1905518.0400391-.2857056.0461426-.0065918.0004883-.0131836.0007324-.0197144.0007324-.0248413,0-.0493164-.0026855-.0742188-.0026855h-.0213623c-.0556641,0-.111145-.0004883-.1657715-.0073242-.0386963-.0048828-.0755615-.015625-.1135254-.0236816-.0531006-.0109863-.1061401-.0209961-.1575317-.0378418-.038269-.0124512-.0740356-.0297852-.111084-.045166-.0483398-.0202637-.0964966-.0397949-.1425171-.0651855-.0354614-.0192871-.0682373-.0427246-.1020508-.0649414-.043335-.0285645-.0863037-.0571289-.1266479-.090332-.0319824-.0263672-.0609131-.0556641-.0906982-.0847168-.036499-.0354004-.0723267-.0712891-.1052246-.1108398-.0281982-.0336914-.0531006-.0698242-.0783081-.1064453-.0281372-.0407715-.0551758-.0817871-.0792236-.1257324-.022522-.0407715-.041626-.0834961-.0603638-.126709-.0117188-.0273438-.0274658-.0512695-.0376587-.0793457l-5.6141968-15.4250488c-.5528564-1.4892578-1.9667969-2.4147949-3.4689941-2.4147949-.5369263,0-1.0852051.1184082-1.609314.3713379-1.737793.8391113-2.4649048,2.9433594-1.8049316,4.7565918l6.2201538,17.0900879c.5006714,1.3754883.94104,2.7722168,1.3198853,4.1862793l3.8839111,14.4946289c1.619873,6.0454102,7.0864868,10.0322266,13.0609131,10.0322266,1.1590576,0,2.3380127-.1503906,3.5107422-.4645996l14.5726318-3.904541c.0734863-.0197754.1401978-.0524902.2116089-.076416.1189575-.026123.2379761-.0441895.3568115-.0759277,10.8629761-2.9106445,11.5737305-8.8225098,11.5435791-10.5222168Z"/><path class="cls-1" d="m41.708357,66.9647568c-.356209-1.3293651-.7702544-2.6425541-1.240955-3.9358202l-6.2204098-17.0907912c-1.2144775-3.3366699.2126465-6.9841309,3.3198242-8.484375.5422041-.2617928,1.1059015-.4430947,1.6845275-.5489796.4221594-.0772524.7313485-.4411738.7687526-.8687103l.2323278-2.6555523-.0025635-.0002441,1.7312298-19.7879028c.1687473-1.9287765-1.2291451-3.923854-3.1464383-4.1933742-2.1155096-.297384-4.0218086,1.2389155-4.2056411,3.3401636l-1.7494507,19.9963379-.0043335-.0004883-.5089111,5.8173828c-.06427.7341309-.6254883,1.3708496-1.3605347,1.4255371-.9366455.0695801-1.6728516-.7092285-1.5944824-1.6044922l2.0106201-22.9440918c.1838352-2.1015173-1.4268026-3.9453881-3.561835-4.0197483-1.9349654-.0673922-3.6580477,1.6547252-3.826791,3.5834964l-1.4732514,16.8395722h-.0006714l-1.1374512,13.0007324c-.0028076.0319824-.0128174.0612793-.0175781.0925293-.0080566.0529785-.0161743.1054688-.0297241.15625-.012207.0463867-.0284424.0898438-.0447388.1340332-.0166626.0449219-.0332642.0893555-.0541382.1323242-.0217285.0446777-.0469971.0866699-.072998.1289062-.0238647.0385742-.0476685.0769043-.0750122.1132812-.02948.0390625-.0617065.0749512-.0948486.111084-.0313721.0341797-.0626831.0678711-.09729.0991211-.0356445.0319824-.0734863.0605469-.1119995.0888672-.0379028.0280762-.0756836.0556641-.116394.0800781-.0428467.0258789-.0876465.0473633-.1330566.0683594-.0406494.0192871-.0806885.0383301-.1235352.0537109-.0517578.019043-.1052246.0322266-.1593018.0454102-.0294189.0068359-.0563354.0187988-.0865479.0241699-.0111084.0019531-.0218506-.0002441-.03302.0014648-.1090698.0168457-.22052.0241699-.335083.0153809-.0062256-.0004883-.0127563.0014648-.0189209.0009766-.0043945-.0004883-.0081787-.0029297-.0125732-.003418-.1433716-.0136719-.2769775-.0527344-.4043579-.1040039-.0267334-.010498-.0528564-.0197754-.0787964-.0322266-.1254883-.0588379-.2406616-.1328125-.3433228-.2226562-.019104-.0163574-.0352783-.0349121-.0535278-.0524902-.100647-.097168-.1906128-.2045898-.2603149-.3261719-.0028076-.005127-.0065918-.0087891-.0093384-.0136719-.0725098-.1298828-.1193848-.2734375-.1501465-.4226074-.0030518-.0141602-2.9405518-16.3808594-2.9405518-16.3808594-.3665427-2.0776006-2.4007086-3.4401615-4.4831162-2.9608815-1.9496894.448734-3.115294,2.4736798-2.7678797,4.4439473l2.5174753,14.2771881c.0007935.0043945.0002441.0085449.0009766.0129395l3.7501831,21.2692871c.2654419,1.6791992,1.9920044,7.3776855,13.1953735,8.3579102.1225586.0107422.2428589.0078125.364563.0126953.0744629.0112305.145813.0319824.2216797.0385742l14.41511,1.2612102c.6599597.0577413,1.0596366-.4185756.888171-1.0584821l-1.9589817-7.3108823Z"/><path class="cls-1" d="m47.4575636,26.5411728c.7598877-.2834473,1.5523071-.4272461,2.3552246-.4272461.2719648,0,.5407764.0171329.8055584.0498849.3583111.0443209.6794248-.2184017.710891-.5780698l.7768418-8.8795317c.1687405-1.9287544-1.2291235-3.9238742-3.1463885-4.1934332-2.1154927-.2974289-4.0218445,1.2388847-4.2056796,3.3401634l-1.1489341,13.1481084c-.0297739.3407245.4224579.5050684.6040598.2152402.7513591-1.1991347,1.8688347-2.1606218,3.2484266-2.6751162Z"/></svg>
`;

Array of Icons

const icons = [
  {
    "name": "community-highfive",
    "path": "/App_Plugins/MyCustomIcons/Icons/high-five-icon.js"
  }
];

export default icons;

VSCode showing the three files needed

Our Icon in the Backoffice

2 Likes

Many thanks Warren!
I was both a bit confused on the locati on of mentioned files, and also under the impression that the guide Soren linked to was not regarding document type icons, but instead something to be used in your own UI when extending the backoffice.

I guess it is both though?

Either way, this worked perfectly, many thanks!

A note to anyone in the future adding MANY icons - if you add ~3500 icons then the UI will fail loading several icons in your browser due to lack of resources.

At least this was my result on my somewhat modern PC with Ryzen 5600X chip.

1 Like

EEK good to know, I would be curious to know how 3500 icons would work/compare in V13 of Umbraco.

I suspect the browser would equally still have a hard time trying to load that many SVGs.

I did a package :slight_smile:

6 Likes

FAB stuff Soren, this needs to be a PR back to core IMO, as the work needed above that I showed is just overkill and to keep with feature parity with the LTS version just makes sense IMO.

But obviously down to the HQ gang to say so.

1 Like

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.