Colors icon
whh:colors
The Colors icon (whh:colors) is a free SVG icon from the WebHostingHub Glyphs set by WebHostingHub. It is drawn on a 1024 × 960 grid. WebHostingHub Glyphs icons are released under the Open Font License, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- WebHostingHub Glyphs
- Author
- WebHostingHub
- License
- OFL-1.1
- Size
- 1024 × 960
- Tags
- color
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="960" viewBox="0 0 1024 960"><path fill="currentColor" d="M1024 640q0 87-43 160.5T864.5 917T704 960q-106 0-192-64q-86 64-192 64q-87 0-160.5-43T43 800.5T0 640q0-97 53.5-176.5T193 346q-1-16-1-26q0-87 43-160.5T351.5 43T512 0t160.5 43T789 159.5T832 320q0 2-2 26h1q86 38 139.5 117.5T1024 640m-960 0q0 106 75 181t181 75q79 0 144-45q-80-91-80-211q0-7 2-26h-1q61 26 127 26t126-26q-5-70-38.5-129.5T512 385q-54 40-87.5 100T385 614v-1q-64-28-111.5-80.5T206 412q-64 32-103 93T64 640M512 64q-106 0-181 75t-75 181v3l1 3q32-6 63-6q107 0 192 64q85-64 192-64q32 0 64 6v-6q0-106-75-181T512 64m306 348q-20 68-67.5 121T639 614h-1q2 19 2 26q0 120-80 211q65 45 144 45q106 0 181-75t75-181q0-74-39-135t-103-93"/></svg>
How to use the Colors icon
React
import { Icon } from "@iconify/react";
<Icon icon="whh:colors" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="whh:colors" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="whh:colors" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[whh--colors]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/whh -->
<div class="i-whh:colors"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="whh:colors"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/whh/colors.svg" alt="Colors icon" width="24" height="24">
Colors icon in other icon sets
Colors icon FAQ
Is the Colors icon free for commercial use?
Yes. WebHostingHub Glyphs icons are released under the Open Font License, which allows use in personal and commercial projects.
How do I use the Colors icon in React?
Install @iconify/react and render <Icon icon="whh:colors" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Colors icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/whh/colors.svg" alt="Colors icon">, or paste the SVG code inline to style it with CSS.
Browse all WebHostingHub Glyphs icons →
ICONYZ
