Energy Icons
energy-icons · 8,000 icons · by Sam Passmore · MIT · single-color · Updated
Energy Icons is a free, open source icon set with 8,000 SVG icons by Sam Passmore, released under the MIT license. The icons are single-color: they follow your text color (currentColor) and can be recolored with CSS.
About Energy Icons
Popular Energy Icons include hex key 48, bookmark 48, brackets 48, check 48, parallelogram 48 and loader 2 48.
Open any icon to copy it as SVG, JSX, Vue, Svelte, Solid, Astro or CSS, or download it as SVG or PNG. Energy Icons are released under the MIT license, which allows use in personal and commercial projects.
How to use Energy Icons
Every icon on this page works in any framework. Examples use energy-icons:hex-key-48; open an icon to copy its exact SVG, JSX, Vue, Svelte, Solid, Astro or CSS code. For sizing, color and accessibility tips, read how to use SVG icons.
React
import { Icon } from "@iconify/react";
<Icon icon="energy-icons:hex-key-48" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="energy-icons:hex-key-48" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="energy-icons:hex-key-48" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[energy-icons--hex-key-48]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/energy-icons -->
<div class="i-energy-icons:hex-key-48"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="energy-icons:hex-key-48"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/energy-icons/hex-key-48.svg" alt="Hex Key 48 icon" width="24" height="24">Energy Icons FAQ
Are Energy Icons free for commercial use?
Yes. Energy Icons are released under the MIT license, which allows use in personal and commercial projects.
How many icons are in Energy Icons?
Energy Icons contains 8,000 icons.
What license do Energy Icons use?
Energy Icons are licensed under MIT. The full license text is available at https://github.com/Sam-r-passmore/energy-icons/blob/main/LICENSE.
Who made Energy Icons?
Energy Icons are created by Sam Passmore.
How do I use Energy Icons in React?
Install @iconify/react and render <Icon icon="energy-icons:hex-key-48" />, or open any icon on this page and copy it as a standalone React component.