arrow-down-left-circle(direction,pointer,navigate,indicator,point,low,descending,decrease,fall,reduce,remaining,sinister,port,round,shape,ring,cycle) 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-[mage--arrow-down-left-circle]"></span>

With @egoist/tailwindcss-icons: Installation Guide

      <span class="i-mage-arrow-down-left-circle"></span>

HTML Tag: SEO / AccessibilityJSXSelf closing tag

      <span class="i-mage-arrow-down-left-circle"></span>

Installation Guide

Import component:

      import MageArrowDownLeftCircle from '~icons/mage/arrow-down-left-circle'

Use component:

      <MageArrowDownLeftCircle />

Installation Guide

Iconify Web Component：Installation Guide

      <iconify-icon icon="mage:arrow-down-left-circle"></iconify-icon>

Iconify URL：

      https://api.iconify.design/mage:arrow-down-left-circle.svg

With @iconify/react:

      <Icon icon="mage:arrow-down-left-circle" />

JSX:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5"><path strokeMiterlimit="10" d="m8.232 15.768l7.832-7.842"/><path strokeLinejoin="round" d="M7.926 8.612v6.396a1.055 1.055 0 0 0 1.055 1.056h6.397"/><path strokeLinejoin="round" d="M12 21.5a9.5 9.5 0 1 0 0-19a9.5 9.5 0 0 0 0 19"/></g></svg>

Component:

      export function MageArrowDownLeftCircle(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-miterlimit="10" d="m8.232 15.768l7.832-7.842"/><path stroke-linejoin="round" d="M7.926 8.612v6.396a1.055 1.055 0 0 0 1.055 1.056h6.397"/><path stroke-linejoin="round" d="M12 21.5a9.5 9.5 0 1 0 0-19a9.5 9.5 0 0 0 0 19"/></g></svg>
  )
}

With @iconify/vue:

      <Icon icon="mage:arrow-down-left-circle" />

With nuxt-icon:

      <Icon name="mage:arrow-down-left-circle" />

Component:

      <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-miterlimit="10" d="m8.232 15.768l7.832-7.842"/><path stroke-linejoin="round" d="M7.926 8.612v6.396a1.055 1.055 0 0 0 1.055 1.056h6.397"/><path stroke-linejoin="round" d="M12 21.5a9.5 9.5 0 1 0 0-19a9.5 9.5 0 0 0 0 19"/></g></svg>
</template>

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

With @iconify/svelte:

      <Icon icon="mage:arrow-down-left-circle" />

Component:

      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-miterlimit="10" d="m8.232 15.768l7.832-7.842"/><path stroke-linejoin="round" d="M7.926 8.612v6.396a1.055 1.055 0 0 0 1.055 1.056h6.397"/><path stroke-linejoin="round" d="M12 21.5a9.5 9.5 0 1 0 0-19a9.5 9.5 0 0 0 0 19"/></g></svg>

Component:

      export function MageArrowDownLeftCircle(props, key) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-miterlimit="10" d="m8.232 15.768l7.832-7.842"/><path stroke-linejoin="round" d="M7.926 8.612v6.396a1.055 1.055 0 0 0 1.055 1.056h6.397"/><path stroke-linejoin="round" d="M12 21.5a9.5 9.5 0 1 0 0-19a9.5 9.5 0 0 0 0 19"/></g></svg>
  )
}

StrongMe - Mindfulness journal

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