caret sort icon

caret-sort from Radix Icons by WorkOS · Outline · MIT Free for personal and commercial use.

Name
caret-sort
Set
Radix Icons
Style
Outline
Viewbox
15×15
License
MIT

The same icon in other sets

caret-sortCarboncaret-sort-outlineFlowbite Icons

Related icons in Radix Icons

caret-downcaret-leftcaret-rightcaret-up

Use the caret sort icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M4.932 8.932a.45.45 0 0 1 .637 0L7.5 10.863l1.932-1.931l.07-.058a.45.45 0 0 1 .624.624l-.057.07l-2.25 2.25l-.07.058a.45.45 0 0 1-.567-.057l-2.25-2.25a.45.45 0 0 1 0-.637M7.5 3.05a.45.45 0 0 1 .319.132l2.25 2.25a.45.45 0 0 1-.637.637L7.5 4.137L5.57 6.069l-.07.057a.451.451 0 0 1-.625-.624l.058-.07l2.25-2.25A.45.45 0 0 1 7.5 3.05"/></svg>

React

import type { SVGProps } from "react";

export function RadixIconsCaretSort(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M4.932 8.932a.45.45 0 0 1 .637 0L7.5 10.863l1.932-1.931l.07-.058a.45.45 0 0 1 .624.624l-.057.07l-2.25 2.25l-.07.058a.45.45 0 0 1-.567-.057l-2.25-2.25a.45.45 0 0 1 0-.637M7.5 3.05a.45.45 0 0 1 .319.132l2.25 2.25a.45.45 0 0 1-.637.637L7.5 4.137L5.57 6.069l-.07.057a.451.451 0 0 1-.625-.624l.058-.07l2.25-2.25A.45.45 0 0 1 7.5 3.05"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M4.932 8.932a.45.45 0 0 1 .637 0L7.5 10.863l1.932-1.931l.07-.058a.45.45 0 0 1 .624.624l-.057.07l-2.25 2.25l-.07.058a.45.45 0 0 1-.567-.057l-2.25-2.25a.45.45 0 0 1 0-.637M7.5 3.05a.45.45 0 0 1 .319.132l2.25 2.25a.45.45 0 0 1-.637.637L7.5 4.137L5.57 6.069l-.07.057a.451.451 0 0 1-.625-.624l.058-.07l2.25-2.25A.45.45 0 0 1 7.5 3.05"/></svg>
</template>

CSS

.icon-caret-sort {
  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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.932%208.932a.45.45%200%200%201%20.637%200L7.5%2010.863l1.932-1.931l.07-.058a.45.45%200%200%201%20.624.624l-.057.07l-2.25%202.25l-.07.058a.45.45%200%200%201-.567-.057l-2.25-2.25a.45.45%200%200%201%200-.637M7.5%203.05a.45.45%200%200%201%20.319.132l2.25%202.25a.45.45%200%200%201-.637.637L7.5%204.137L5.57%206.069l-.07.057a.451.451%200%200%201-.625-.624l.058-.07l2.25-2.25A.45.45%200%200%201%207.5%203.05%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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.932%208.932a.45.45%200%200%201%20.637%200L7.5%2010.863l1.932-1.931l.07-.058a.45.45%200%200%201%20.624.624l-.057.07l-2.25%202.25l-.07.058a.45.45%200%200%201-.567-.057l-2.25-2.25a.45.45%200%200%201%200-.637M7.5%203.05a.45.45%200%200%201%20.319.132l2.25%202.25a.45.45%200%200%201-.637.637L7.5%204.137L5.57%206.069l-.07.057a.451.451%200%200%201-.625-.624l.058-.07l2.25-2.25A.45.45%200%200%201%207.5%203.05%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/radix-icons/caret-sort.svg?color=%231a73e8&size=48