Web Icons with No External Libraries! (🙅 No More Font Awesome)

Don't you hate when you're using Font Awesome, and it loads 500KB of JavaScript just to render 3 ICONS? You don't have to rely on big fat external libraries to do it for you! You can do it all by yourself, just grab the SVG and you're good to go! Watch the video to learn more (what big external libraries DON'T want you to know...)
The site I was using for the icons:
iconify.design/
🌐 ericmurphy.xyz/
Affiliate links to services I use:
www.vultr.com/?ref=8530325-6G Get a VPS to host your website or server.

[@ChumX100]

You're missing the whole point of Iconify. Their library is just about 13kb and it replaces the icon tags with svgs automatically, by loading them dynamically from an API. It also caches the loaded icons locally so that they are only loaded once and new requests and pages that use the same icons won't incurr any further overhead.

[@schlepers]

Thanks alot man. I was able to increase my Google lighthouse performance a bit by swapping out of the AwesomeFont kit code vs SVG. Much appreciation!!

[@EricMurphyxyz]

Love to hear it!

[@williammcdermed7287]

Thank you for your response. I failed to mention how helpful your video was because it gave me the info to just tackle the whole use of svg's in a very direct way. You are right the only thing that was helpful from FA was the svg. So thanks again!

[@PLuffy-ke7ho]

This was awesome! I tried to use Font Awesome but couldn't get the kit to load properly with my site. This is a nice alternative and taught me more about a different attribute. Many thanks!

[@coodie]

Great video explanation. Loved that you showed the amount of resources before and after. Thanks for the video!

[@madtho]

Awesome, thank you. Had to tweak some styles to work with the svg, but looks and works great.

[@jeslela]

Thanks for this simple and straight to the point video! 👏🏽

[@jeffbarnhart6441]

love how you go into dev tools. perfect video.

[@MuhammadAkbar-sy7zm]

Thank you. I have been looking for this solution, avoiding those unnecessary external libraries

[@DoompyGames]

That's the most useful tip I have heard in a while, thank you sir. I found literally zero sources on how to get rid of the bloat introduced by font-awesome. In a plain nextjs application, with the different setup strategies for font-awesome or fort-awesome, the minimum you can achieve is an additional 20kb loaded for all of your pages. That refers to around 10% of additional chunk size per page.

[@EricMurphyxyz]

Love to hear it! Glad it helped

[@codebasic8558]

This is wonderful! Thank you very much, good sir!

[@AnthonyJackman]

Awesome video! Something so simple. I am running into the same thing you did with FA. I am only using 2 icons out of FA. The difference in my project is that I am doing a build using SASS. Your way may seem a little management work on the developer, but that effort pays dividends with site users. Thank you for making this!

[@digitalminister5687]

You save cellular data as well this way! Thank you for the video!

[@christianworld2]

Thanks man. This video is really helpful. Have really tried others but didn't work until i met this video

[@GulfJobSeeker_Vacancies]

Thanks a lot for giving this simple but logical solution.

[@9squares]

Just what I was looking for, Thank you

[@acke5180]

Great job! You just gave me a homeWork.. :) Subscribed. Keep up the good work!

[@atmanvisual190]

Lovely video, man. Thanks a lot.

[@ArsenTech]

Iconify Fixed My Website Icons, Thanks So Much

[@gaetandesignz4599]

Great video !!! It makes your website load faster, but it takes a bunch of lines that a boring thing sometimes exp if you have consecutively five.

[@torg27]

this is really brilliant!! thank you!!

[@mouctechy]

thank you my dude was looking an alternative to optimize my portfolio 👏👏

[@dominikchynoradsky4228]

Good thinking sir, thank you.

[@moaaz_hassan]

Thanks but what about size of code i tried to put the svg icons on my website on blogger i noticed that code size increased from 40kb to 50kb how to fix it.

[@olga_lc]

Thanks a lot, that was helpful!

[@rakeshmanathana]

Very helpful. Thank you.

[@deadlock7946]

Just wow. Thank you so much!!!

[@mohamed-tm8kr]

thank you bro, you saved my life
i love you

[@skilllearn904]

thanks broyher thats help me alot ,good work

[@limehouseblues]

thank-you, this was very helpful

[@nyuentreprise3402]

Thank you very much buddy !🙌

[@Gyannea]

This is where I want to go, but I could not get the font size to work. I had to delete the width and height and do width and height in css instead. Is that because my svg icon width and height units are px?

[@wolfenrico]

Thats great! Thanks!

[@nikachkhobadze7710]

Really useful. Thanks

[@tameemsani7387]

it was really help full ....thank you

[@wolfenrico]

Awesome. Thanks!

[@madihamuhammad4633]

Thanks man.u saved my time .

[@ishaanagarwal]

Thank you so much!!! ❤️

[@gopalloharnew5948]

How to use svg's in css without smashing it into html ?
like keeping it in another file .. but the fill becomes a problem !

[@samuelthomas5494]

Thank you for sharing this video :-)

[@TheNomanAhmed]

Thanks Eric this is great video. I had been using FA in many of my projects and this is a great way to optimize the size. But i am just wondering how would you approach the problem if we have to use FA in the pseudo elements in css. Would there be a better way to do it ?

[@EricMurphyxyz]

Thanks! Yes, copy the SVG code and convert it to a data URL using a site like this: yoksel.github.io/url-encoder/ Now you can use it like a background-image in CSS. You have to manually style the pseudo-element it to make it look right so not be as convenient as FA, but still works well.

[@TheNomanAhmed]

@@EricMurphyxyz Thanks for the reply. I will try this approach. 👍🏽

[@alexdem98]

Very nice!

[@helloanshu4080]

thanks mate!

[@bartickmaiti3049]

Thanks man.

[@greggregory9029]

you helped me! thanks

[@sonoftroy8572]

Very informative, I didn’t think to monitor the amount of data being loaded using font awesome. I’v learned something today. Thanks

[@gopalloharnew5948]

That's what I wanted !

[@nelsonazolukwamprojects]

I thought the browser downloads the files once, or is downloaded on every request?

[@kedigiller111]

really helpfull, thanks a lot

[@mrtmore1038]

Thank you!

[@PhilipProchazka]

yeah that is what i knew also before, i wanted to actually create my own font library, I do also fight here to get more than font awesome into my new angular template, so i guess it will be easier to stay into my known practics i understand and that buch will go propably down. you can also store those svgs into a folder and call them by name i guess after setting to include & require that folder and than callin those svg elements

[@EricMurphyxyz]

Yeah that's another more efficient method if you don't mind doing that yourself 👍

[@frank-lx2yn]

thank you very much!
🙏🙏🙏🙏

[@HeitorYT]

I use preact for my projects and using local svg is the best thing. It doesn't show any errors.

[@MicRodrgz]

thanks for the idea!
subscribe done 👍

[@alexhardao2742]

wow nice tip!

[@aneeshrc6848]

Thank you bro it's working 💓💓💓😊😊😊😊😊😊

[@giovannimichel5506]

Thank you for the intel.

[@marcelositonio2495]

Awesome :)

[@bettercalldelta]

You could probably still use the fontawesome tags but make a server-side script to "compile" it into what will actually be served to the client.

[@vishveshpratapsingh]

Thanks bro

[@dc-tlc9654]

Thanks 👍

[@hamzakhiar3636]

I'm kind of thinking on making a community plug-in on for instance figma where designers design icons and stuff and getting them with JavaScript as svg's or png's and replace font awesome

[@samo4502]

niceeeeeee thanks and i like it

[@sharonamaina3553]

Thank you

[@williammcdermed7287]

Thanks man. I got the same result without "identify", just grab the SVG code from FA and parse as you did.

[@EricMurphyxyz]

Yes you don't need iconify, they just make it a little easier than going through the Dev tools

[@TarunChkravarthi]

That really looks cool! Any suggestions to avoid too much svg code which could get hard to identify the specific icons when we are working on big projects or massive codebase?
Just like creating our own icon-fonts using any svg code we choose for?
Keep going!

[@EricMurphyxyz]

Thanks! You can move all the SVG code to a separate file and replace it with inside the SVG tag.

[@muhammadhaiqal531]

@@EricMurphyxyz how can I do that?

[@EricMurphyxyz]

@@muhammadhaiqal531 I explained it pretty clearly? Copy the SVG code to a separate file, name it something like your-icon.svg and then reference it with the tag I showed above

[@muhammadhaiqal531]

@@EricMurphyxyz yes I did exactly that, but somehow it doesn't work, but I figured a workaround so yeah

[@caesarliftz]

@@muhammadhaiqal531 i tried too, but it didn't work

[@tomslaterdesignillustratio4391]

Genius!

[@asdffacil]

Nice tip

[@musicallife3062]

Thanks bro I was not able to use font awesome
Thanks for this vedio

[@jaykay5486]

Would this work with the code from Illustrator SVG,

[@EricMurphyxyz]

I would assume so, should work with any SVG code.

[@septimusforster]

Is there a workaround to subscribe multiple times on a TH-cam channel? This one definitely deserves it.

[@peterpeter8421]

たすかったよ ありがとう

[@md.ridwanulhassanrafi6851]

thanks a lot 🤍🤍

[@nelsonazolukwamprojects]

Wonderful content though. never knew that existed.

[@jake445]

This kind of video is what I needed. I am very much a beginner, but I wondered why I have to link huge external libraries, when I needed only 1-2 icons. Lots of unused codes in the libraries, and damn, now I am using svg, it makes codes appear larger, but i just embed it inside span tag and collapse it.

[@gudneighbour]

thanks

[@agentsmith2189]

ty

[@digitalminister5687]

Iconmonstr has many cool icons as well

[@EricMurphyxyz]

Nice, great resource! Never heard about this before

[@Nature-calm-song]

Awesome

[@softwarereviews2496]

Thanks Dear
Give me to great skills

[@mtycoder]

im using boxicons and is open source, besides that with that library they easily allow you to copy the SVG file, give them a try.,

[@ilovancristian]

thx

[@luckybairagi7294]

which OS are you using??

[@EricMurphyxyz]

Arch Linux!

[@MarttyLovato]

genio te quiero mucho

[@TheTimeProphet]

I do a similar thing, but you can put all your svg icons into one file and give them an id and use xlink to show them. This way you only have one file to load, as it gets cached. eg
This code would show the icon with the id of hat. The svg file can have hundreds of icons with a different id. Of course you have to set the width and height in css, as SVG has to have a width and a height. Let me know if you want to know more

[@TheTimeProphet]

@Entertainment Roller Coaster I am always around

[@TheTimeProphet]

@Entertainment Roller Coaster Once you made your file. Use the first code I posted to show it. eg
Just change the xlink line to whatever icon you want to show eg

[@TheTimeProphet]

@Entertainment Roller Coaster You have all your icons in one file. That means your icons will load faster as it is one call to the file. As for the individual icons you can either make them yourself in illustrator and export the data, or download and use other peoples svgs. I do a bit of both. the important part is the viewBox, and the paths. Personally I would optimise your svg online before putting it in the file. This removes all the unnessary groups which you don't need on the web. I also remove colours. Then you can colour your svg using css.

[@timawid]

actually font awesome gives me some problem not letting the icon apear. i wont ever use fontawesome
Thanks❤❤

[@R.A.G.U.L]

You are a fucking genius broo☠Even after 3years you solved my problem

[@biyanwho]

The real question is, how do you display this icon as pseudo element

[@craigburton4447]

Could you perhaps save the SVG to your images folder and put it's URL in the content " " property? I haven't tried it, but that's what I would try first

[@bettercalldelta]

turn it into a data url

[@jimohyinka4895]

this looks nice, but I think a link would be needed?

[@EricMurphyxyz]

You mean an attribution link?

[@j.m.p.8739]

remove the xlmns and let's see if it loads the icon.

[@kamdanibwp]

جزاک اللہ خیرا

[@Ayomikun]

I'm probably just being silly, but is this definitely allowed?

[@EricMurphyxyz]

Font Awesome is under an open source license, so it's all good.

[@Ayomikun]

@@EricMurphyxyz Thanks, this is fucking awesome then 🤣

[@ck0024]

I use boxicon

[@EricMurphyxyz]

Wow, there's a lot of great icon resources I never knew about

[@golf_wangg48]

[@Ilyas_Alrai]

But as programmer you allways want a way simplify things and let machine do all stuff for you instead of copying every single icon code. I think javascript itself is a bloated language but we use it anyways because it does the job.

[@EricMurphyxyz]

There are more efficient ways to use icons without bringing in the bloated Font Awesome library. I know react-icons for React is good, but I'm not sure of an easier way to do it in just HTML. That said, I only really need around 5 icons for a given website and copy & pasting a small amount of icons is not a big deal for me. The performance savings are worth it for me, but it's up to you.

[@thakurtilak2860]

Thank you, you have shown easy path otherwise I was getting box instead of icon i desired.Thanks again to solve it without going through all that process.By do by, u decoded font-awesome secret so its coming for u.

[@sovereignlivingsoul]

that is a good suggestion until they close the sight or change their policies, using programs like GIMP and Inkscape to create your own icons would be a useful skill to learn.

[@EricMurphyxyz]

There are still tons of ways to get the svg code without that specific website, it's not just something they can change their policies and remove. Making your own icons may be a useful skill but nobody is going to hand render a Facebook icon for their website

[@sovereignlivingsoul]

@@EricMurphyxyz yeah, i know, i think knowing how to insert svg files into their website is a god skill, that's all, your advice is sound.

[@donmorris4506]

Dude, just get a font awesome pro license and then can include just the icons you want.

[@EricMurphyxyz]

Even the official Font Awesome library brings in a bunch of unnecessary JavaScript. React Icons is a lot more light weight.

[@timawid]

Thanks bro