bold(strong,emphasized,thick,font weight) 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--bold]"></span>

With @egoist/tailwindcss-icons: Installation Guide

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

HTML Tag: SEO / AccessibilityJSXSelf closing tag

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

Installation Guide

Import component:

      import BxBold from '~icons/bx/bold'

Use component:

      <BxBold />

Installation Guide

Iconify Web Component：Installation Guide

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

Iconify URL：

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

With @iconify/react:

      <Icon icon="bx:bold" />

JSX:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.061 11.22A4.46 4.46 0 0 0 18 8.5C18 6.019 15.981 4 13.5 4H6v15h8c2.481 0 4.5-2.019 4.5-4.5a4.48 4.48 0 0 0-1.439-3.28M13.5 7c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5H9V7zm.5 9H9v-3h5c.827 0 1.5.673 1.5 1.5S14.827 16 14 16"/></svg>

Component:

      export function BxBold(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}><path fill="currentColor" d="M17.061 11.22A4.46 4.46 0 0 0 18 8.5C18 6.019 15.981 4 13.5 4H6v15h8c2.481 0 4.5-2.019 4.5-4.5a4.48 4.48 0 0 0-1.439-3.28M13.5 7c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5H9V7zm.5 9H9v-3h5c.827 0 1.5.673 1.5 1.5S14.827 16 14 16"/></svg>
  )
}

With @iconify/vue:

      <Icon icon="bx:bold" />

With nuxt-icon:

      <Icon name="bx:bold" />

Component:

      <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.061 11.22A4.46 4.46 0 0 0 18 8.5C18 6.019 15.981 4 13.5 4H6v15h8c2.481 0 4.5-2.019 4.5-4.5a4.48 4.48 0 0 0-1.439-3.28M13.5 7c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5H9V7zm.5 9H9v-3h5c.827 0 1.5.673 1.5 1.5S14.827 16 14 16"/></svg>
</template>

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

With @iconify/svelte:

      <Icon icon="bx:bold" />

Component:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.061 11.22A4.46 4.46 0 0 0 18 8.5C18 6.019 15.981 4 13.5 4H6v15h8c2.481 0 4.5-2.019 4.5-4.5a4.48 4.48 0 0 0-1.439-3.28M13.5 7c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5H9V7zm.5 9H9v-3h5c.827 0 1.5.673 1.5 1.5S14.827 16 14 16"/></svg>

Component:

      export function BxBold(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="M17.061 11.22A4.46 4.46 0 0 0 18 8.5C18 6.019 15.981 4 13.5 4H6v15h8c2.481 0 4.5-2.019 4.5-4.5a4.48 4.48 0 0 0-1.439-3.28M13.5 7c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5H9V7zm.5 9H9v-3h5c.827 0 1.5.673 1.5 1.5S14.827 16 14 16"/></svg>
  )
}

StrongMe - Mindfulness journal

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