bong(water pipe,smoking device,hookah,cannabis) Vector Icon

Tailwind CSS UnoCSS Unplugin Icons Iconify React Vue Svelte Solid

HTML Tag: SEO / AccessibilityJSXSelf closing tag

With @iconify/tailwind: Installation Guide

      <span class="icon-[bx--bong]"></span>

With @egoist/tailwindcss-icons: Installation Guide

      <span class="i-bx-bong"></span>

HTML Tag: SEO / AccessibilityJSXSelf closing tag

      <span class="i-bx-bong"></span>

Installation Guide

Import component:

      import BxBong from '~icons/bx/bong'

Use component:

      <BxBong />

Installation Guide

Iconify Web Component：Installation Guide

      <iconify-icon icon="bx:bong"></iconify-icon>

Iconify URL：

      https://api.iconify.design/bx:bong.svg

With @iconify/react:

      <Icon icon="bx:bong" />

JSX:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.293 8.293l-2.069 2.069A7 7 0 0 0 15 8.681V4h1V2H8v2h1v4.681A7.01 7.01 0 0 0 5 15c0 3.859 3.141 7 7 7s7-3.141 7-7a7 7 0 0 0-.652-2.934l2.359-2.359zm-8.959 1.998l.666-.235V4h2v6.056l.666.235A5 5 0 0 1 16.886 14H7.114a5 5 0 0 1 3.22-3.709M12 20a5.01 5.01 0 0 1-4.898-4h9.797A5.01 5.01 0 0 1 12 20"/></svg>

Component:

      export function BxBong(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}><path fill="currentColor" d="m19.293 8.293l-2.069 2.069A7 7 0 0 0 15 8.681V4h1V2H8v2h1v4.681A7.01 7.01 0 0 0 5 15c0 3.859 3.141 7 7 7s7-3.141 7-7a7 7 0 0 0-.652-2.934l2.359-2.359zm-8.959 1.998l.666-.235V4h2v6.056l.666.235A5 5 0 0 1 16.886 14H7.114a5 5 0 0 1 3.22-3.709M12 20a5.01 5.01 0 0 1-4.898-4h9.797A5.01 5.01 0 0 1 12 20"/></svg>
  )
}

With @iconify/vue:

      <Icon icon="bx:bong" />

With nuxt-icon:

      <Icon name="bx:bong" />

Component:

      <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.293 8.293l-2.069 2.069A7 7 0 0 0 15 8.681V4h1V2H8v2h1v4.681A7.01 7.01 0 0 0 5 15c0 3.859 3.141 7 7 7s7-3.141 7-7a7 7 0 0 0-.652-2.934l2.359-2.359zm-8.959 1.998l.666-.235V4h2v6.056l.666.235A5 5 0 0 1 16.886 14H7.114a5 5 0 0 1 3.22-3.709M12 20a5.01 5.01 0 0 1-4.898-4h9.797A5.01 5.01 0 0 1 12 20"/></svg>
</template>

<script>
export default {
  name: 'BxBong'
}
</script>

With @iconify/svelte:

      <Icon icon="bx:bong" />

Component:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.293 8.293l-2.069 2.069A7 7 0 0 0 15 8.681V4h1V2H8v2h1v4.681A7.01 7.01 0 0 0 5 15c0 3.859 3.141 7 7 7s7-3.141 7-7a7 7 0 0 0-.652-2.934l2.359-2.359zm-8.959 1.998l.666-.235V4h2v6.056l.666.235A5 5 0 0 1 16.886 14H7.114a5 5 0 0 1 3.22-3.709M12 20a5.01 5.01 0 0 1-4.898-4h9.797A5.01 5.01 0 0 1 12 20"/></svg>

Component:

      export function BxBong(props, key) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><path fill="currentColor" d="m19.293 8.293l-2.069 2.069A7 7 0 0 0 15 8.681V4h1V2H8v2h1v4.681A7.01 7.01 0 0 0 5 15c0 3.859 3.141 7 7 7s7-3.141 7-7a7 7 0 0 0-.652-2.934l2.359-2.359zm-8.959 1.998l.666-.235V4h2v6.056l.666.235A5 5 0 0 1 16.886 14H7.114a5 5 0 0 1 3.22-3.709M12 20a5.01 5.01 0 0 1-4.898-4h9.797A5.01 5.01 0 0 1 12 20"/></svg>
  )
}

StrongMe - Mindfulness journal

Capture every small win, cherish every beautiful moment, and share every joy of growth.