arrow down icon

arrow-down-outline from Solar by 480 Design · Outline · Arrows · CC-BY-4.0 Attribution required.

Name
arrow-down-outline
Set
Solar
Style
Outline
Category
Arrows
Viewbox
24×24
License
CC BY 4.0

5 other variants in Solar

arrow-down-boldarrow-down-bold-duotonearrow-down-brokenarrow-down-line-duotonearrow-down-linear

The same icon in other sets

arrow-downAkar Iconsarrow-down-outlinedAnt Design Iconsarrow-downBootstrap Iconsarrow-downCarbonarrow-downCodiconsarrow-downElement Plusarrow-down-fillEva Iconsarrow-downFramework7 Iconsarrow-downFont Awesome 6 Solidarrow-downFont Awesome Solidarrow-downFeather Iconsarrow-down-outlineFlowbite Iconsarrow-down-12-filledFluent UI System Iconsarrow-downcss.ggarrow-downHeroIconsarrow-downHumbleiconsarrow-downIconParkarrow-downIconPark Outlinearrow-downIconoirarrow-downIonIconsarrow-downJam Iconsarrow-downLine Awesomearrow-downMaterial Line Iconsarrow-downLucide

More arrows icons from Solar

alt-arrow-down-boldalt-arrow-left-boldalt-arrow-right-boldalt-arrow-up-boldarrow-left-boldarrow-left-down-boldarrow-left-up-boldarrow-right-boldarrow-right-down-boldarrow-right-up-boldarrow-up-bolddouble-alt-arrow-down-bolddouble-alt-arrow-left-bolddouble-alt-arrow-right-bolddouble-alt-arrow-up-boldrefresh-boldrefresh-circle-boldrefresh-square-boldrestart-boldrestart-circle-boldrestart-square-boldround-alt-arrow-down-boldround-alt-arrow-left-boldround-alt-arrow-right-bold

Use the arrow down icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 3.25C12.4142 3.25 12.75 3.58579 12.75 4L12.75 18.1893L17.4697 13.4697C17.7626 13.1768 18.2374 13.1768 18.5303 13.4697C18.8232 13.7626 18.8232 14.2374 18.5303 14.5303L12.5303 20.5303C12.3897 20.671 12.1989 20.75 12 20.75C11.8011 20.75 11.6103 20.671 11.4697 20.5303L5.46967 14.5303C5.17678 14.2374 5.17678 13.7626 5.46967 13.4697C5.76256 13.1768 6.23744 13.1768 6.53033 13.4697L11.25 18.1893L11.25 4C11.25 3.58579 11.5858 3.25 12 3.25Z" clip-rule="evenodd"/></svg>

React

import type { SVGProps } from "react";

export function SolarArrowDownOutline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fillRule="evenodd" d="M12 3.25C12.4142 3.25 12.75 3.58579 12.75 4L12.75 18.1893L17.4697 13.4697C17.7626 13.1768 18.2374 13.1768 18.5303 13.4697C18.8232 13.7626 18.8232 14.2374 18.5303 14.5303L12.5303 20.5303C12.3897 20.671 12.1989 20.75 12 20.75C11.8011 20.75 11.6103 20.671 11.4697 20.5303L5.46967 14.5303C5.17678 14.2374 5.17678 13.7626 5.46967 13.4697C5.76256 13.1768 6.23744 13.1768 6.53033 13.4697L11.25 18.1893L11.25 4C11.25 3.58579 11.5858 3.25 12 3.25Z" clipRule="evenodd"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 3.25C12.4142 3.25 12.75 3.58579 12.75 4L12.75 18.1893L17.4697 13.4697C17.7626 13.1768 18.2374 13.1768 18.5303 13.4697C18.8232 13.7626 18.8232 14.2374 18.5303 14.5303L12.5303 20.5303C12.3897 20.671 12.1989 20.75 12 20.75C11.8011 20.75 11.6103 20.671 11.4697 20.5303L5.46967 14.5303C5.17678 14.2374 5.17678 13.7626 5.46967 13.4697C5.76256 13.1768 6.23744 13.1768 6.53033 13.4697L11.25 18.1893L11.25 4C11.25 3.58579 11.5858 3.25 12 3.25Z" clip-rule="evenodd"/></svg>
</template>

CSS

.icon-arrow-down-outline {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%203.25C12.4142%203.25%2012.75%203.58579%2012.75%204L12.75%2018.1893L17.4697%2013.4697C17.7626%2013.1768%2018.2374%2013.1768%2018.5303%2013.4697C18.8232%2013.7626%2018.8232%2014.2374%2018.5303%2014.5303L12.5303%2020.5303C12.3897%2020.671%2012.1989%2020.75%2012%2020.75C11.8011%2020.75%2011.6103%2020.671%2011.4697%2020.5303L5.46967%2014.5303C5.17678%2014.2374%205.17678%2013.7626%205.46967%2013.4697C5.76256%2013.1768%206.23744%2013.1768%206.53033%2013.4697L11.25%2018.1893L11.25%204C11.25%203.58579%2011.5858%203.25%2012%203.25Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%203.25C12.4142%203.25%2012.75%203.58579%2012.75%204L12.75%2018.1893L17.4697%2013.4697C17.7626%2013.1768%2018.2374%2013.1768%2018.5303%2013.4697C18.8232%2013.7626%2018.8232%2014.2374%2018.5303%2014.5303L12.5303%2020.5303C12.3897%2020.671%2012.1989%2020.75%2012%2020.75C11.8011%2020.75%2011.6103%2020.671%2011.4697%2020.5303L5.46967%2014.5303C5.17678%2014.2374%205.17678%2013.7626%205.46967%2013.4697C5.76256%2013.1768%206.23744%2013.1768%206.53033%2013.4697L11.25%2018.1893L11.25%204C11.25%203.58579%2011.5858%203.25%2012%203.25Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/solar/arrow-down-outline.svg?color=%231a73e8&size=48