Introducing Ionicons! 1,300 Free Icons for Every Website. Zero Setup Required.

Every now and then when building out a vibe we get to a point where things are functional but “ugly”. Plain buttons without icons, indistinguishable menu items, or confusing call to actions. I’ve had my agents try to address these issues before, and usually they install an npm package that bundles a whole suite of components just to get a simple magnifying glass.

Ionicons is a collection of 1,300 icons designed for web applications by the Ionic Framework team. They come in three flavors: filled, outline, and sharp which allows you to choose how you want to highlight various elements. They can be implemented via web components, meaning you only need to include two scripts at the bottom of your html file and then you can reference them just like any other html element. That’s it! There’s nothing to install, no npm packages to download, and no build steps.

You’ll find the standard set of icons for UI elements, media, shopping, and social media. There are also icons for travel, communication, accessibility, and brand logos. These icons are released under the MIT license so they’re free for both personal and commercial use without requiring attribution. Originally developed for Ionic’s mobile framework, these web components can be used in any project, regardless of the stack (HTML, React, Vue, etc.)

1How to add Ionicons to your website

Copy and paste the following two lines into your HTML file right before the </body> tag. That’s it! Each icon will be lazy loaded as a small SVG and won’t even hit the network until the user scrolls to view it.

<script type="module" src="https://esm.sh/ionicons@latest/loader"></script>
<script nomodule src="https://esm.sh/ionicons@latest/loader"></script>

Use any icon with the <ion-icon></ion-icon> tag. Check out the list of all 1,300 icons available at ionicons.com. Simply click on any icon to copy its name.

<ion-icon name="heart"></ion-icon>
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart-sharp"></ion-icon>

Change the color and size of any icon using simple CSS. They recommend using multiples of 8, like 16, 32, 64, to keep the icons looking sharp across all devices.