Hobby icon
cbi:hobby
The Hobby icon (cbi:hobby) is a free SVG icon from the Custom Brand Icons set by Emanuele & rchiileea. It is drawn on a 24 × 24 grid. Custom Brand Icons use the CC BY-NC-SA 4.0 license, which does not allow commercial use without separate permission from the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Custom Brand Icons
- Author
- Emanuele & rchiileea
- License
- CC-BY-NC-SA-4.0
- Size
- 24 × 24
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16.742 10.592a.83.83 0 0 0-.43.1a5 5 0 0 1-.406.177c-.01 0-.037-.01-.037-.03V9.386c0-.086.034-.3-.106-.3a.7.7 0 0 0-.234.07a4 4 0 0 1-.836.227c-.09.013-.274.026-.274.146c0 .07.077.09.127.1c.357.05.337.117.337.463v2.963a3 3 0 0 1-.014.423a1 1 0 0 0-.013.107c0 .076.03.125.113.125c.184 0 .207-.392.347-.392a.8.8 0 0 1 .183.083a1.54 1.54 0 0 0 .83.217a1.69 1.69 0 0 0 1.836-1.577a1.41 1.41 0 0 0-1.423-1.449m.214 2.337a.74.74 0 0 1-.6.463c-.524 0-.487-.45-.487-.837v-1.12a.36.36 0 0 1 .41-.433c.577 0 .836.7.836 1.184a1.7 1.7 0 0 1-.159.743m-4.013-2.337a.83.83 0 0 0-.43.1a4 4 0 0 1-.4.177c-.013 0-.04-.01-.04-.03V9.386c0-.086.033-.3-.107-.3a.7.7 0 0 0-.233.07a4 4 0 0 1-.837.227c-.09.013-.273.026-.273.146c0 .07.077.09.127.1c.356.05.336.117.336.463v2.963a3 3 0 0 1-.013.423a1 1 0 0 0-.013.107c0 .076.03.125.113.125c.187 0 .21-.392.35-.392a.7.7 0 0 1 .183.083a1.55 1.55 0 0 0 .83.217a1.7 1.7 0 0 0 1.836-1.577a1.41 1.41 0 0 0-1.429-1.449m.214 2.337a.74.74 0 0 1-.6.463c-.524 0-.487-.45-.487-.837v-1.12a.47.47 0 0 1 .063-.29a.46.46 0 0 1 .347-.143c.577 0 .837.7.837 1.184a1.7 1.7 0 0 1-.16.743m-3.186-1.97a1.93 1.93 0 0 0-1.177-.367a1.68 1.68 0 0 0-1.793 1.51a1.59 1.59 0 0 0 1.743 1.51a1.68 1.68 0 0 0 1.809-1.557a1.4 1.4 0 0 0-.582-1.096m-1.117 2.443c-.633 0-.836-.994-.836-1.464c0-.423.166-1.126.71-1.126a.77.77 0 0 1 .613.473a2.2 2.2 0 0 1 .2.923c-.003.414-.13 1.187-.687 1.194M6.632 9.86c.077-.014.177-.027.177-.127s-.067-.12-.157-.12c-.3 0-.6.027-.907.027c-.33 0-.646-.027-.976-.027c-.09 0-.154.02-.154.12s.127.113.2.127c.4.07.366.233.366.619v.613c0 .233.007.227-.21.227H3.845c-.219 0-.225 0-.225-.226v-.614c0-.422-.03-.549.399-.619c.076-.013.176-.026.176-.126s-.07-.12-.156-.12c-.3 0-.599.026-.906.026c-.33 0-.647-.026-.977-.026c-.09 0-.153.02-.153.12s.127.113.2.126c.4.07.367.234.367.619v2.243c0 .413.017.52-.4.59c-.077.013-.17.047-.17.147s.063.12.153.12c.3 0 .607-.027.91-.027c.33 0 .646.027.976.027c.083 0 .153-.024.153-.12c0-.117-.12-.134-.2-.147c-.399-.063-.372-.217-.372-.59v-.887c0-.26-.02-.233.245-.233h1.127c.17 0 .183-.017.19.153v.97c0 .414.017.52-.4.59c-.077.014-.17.047-.17.147s.063.12.153.12c.3 0 .61-.027.914-.027c.326 0 .643.027.973.027c.083 0 .153-.023.153-.12c0-.117-.12-.133-.2-.147c-.4-.066-.373-.216-.37-.59v-2.246c-.003-.423-.033-.549.397-.619m15.202.799c-.184 0-.36.013-.544.013s-.36-.013-.543-.013c-.077 0-.2 0-.2.1c0 .133.146.14.24.146c.123.007.286.05.286.2a.7.7 0 0 1-.076.253l-.424.957c-.013.047-.07.2-.133.2s-.112-.166-.132-.2l-.467-.977a.9.9 0 0 1-.1-.277c0-.13.163-.133.247-.153s.163-.043.163-.14s-.143-.107-.227-.107c-.246 0-.5.014-.74.014c-.276 0-.57-.014-.846-.014c-.1 0-.217 0-.217.107s.107.127.183.14c.12.02.177.02.26.12a3 3 0 0 1 .28.47l.937 1.893a1.1 1.1 0 0 1 .12.346a.6.6 0 0 1-.133.3c-.134.157-.287.12-.477.114c-.133-.007-.28-.027-.373.1a.6.6 0 0 0-.084.31c0 .333.277.353.557.353c.42 0 .393-.1.52-.47l.343-.822l.953-2.02a3 3 0 0 1 .3-.55c.11-.133.16-.123.316-.147c.087-.013.177-.04.177-.146s-.083-.1-.166-.1"/></svg>How to use the Hobby icon
React
import { Icon } from "@iconify/react";
<Icon icon="cbi:hobby" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="cbi:hobby" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="cbi:hobby" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[cbi--hobby]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/cbi -->
<div class="i-cbi:hobby"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="cbi:hobby"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/cbi/hobby.svg" alt="Hobby icon" width="24" height="24">Hobby icon FAQ
Is the Hobby icon free for commercial use?
No. Custom Brand Icons use the CC BY-NC-SA 4.0 license, which does not allow commercial use without separate permission from the author.
How do I use the Hobby icon in React?
Install @iconify/react and render <Icon icon="cbi:hobby" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Hobby icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/cbi/hobby.svg" alt="Hobby icon">, or paste the SVG code inline to style it with CSS.