Pros and Cons of importing icons vs downloading

Hello everyone,

I’ve been trying to google this one but decided to post here instead for me and future learners.

Can someone explain if its better to download icons and display them on a website, or if it’s better to import icons (say Font Awsome) via tags.

For example the Hamgburger icon,

if I know thats the ONLY icon I will be using for some projects, would it be better to download the icon and reuse it, or would it still be faster and more efficient to use Font Awsome?

For a single or a few small icons, there shouldn’t be much difference. So “better” would be what you prefer from a workflow perspective.

Using a CDN can be faster because they have servers all over the world and can serve the resources from a server that is located closer to the user.

If you can get the icon as SVG using it inline is always an option. That way, all you serve is the page and you do not request external resources. The browser does all the work of rendering the icon (SVGs are basically just math).

Font Awesome has SVG code you can copy and use directly inline. Personally, that is what I would do for a single or a couple of icons. Just use it inline.

<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>

It might not be as organized as having all the assets located in dedicated folders but it isn’t an uncommon approach.

1 Like

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