sort down circle icon
sort-down-circle from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- sort-down-circle
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
Related icons in Framework7 Icons
Use the sort down circle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 4c13.255 0 24 10.745 24 24S41.255 52 28 52S4 41.255 4 28S14.745 4 28 4m0 3.429C16.639 7.429 7.429 16.639 7.429 28S16.639 48.571 28 48.571S48.571 39.361 48.571 28S39.361 7.429 28 7.429M20.197 15c1.031 0 1.758.726 1.758 1.758v15.21l-.187 4.946l2.367-2.812l2.906-2.93c.305-.328.75-.516 1.242-.516c.961 0 1.688.727 1.688 1.688c0 .492-.14.914-.446 1.218l-7.968 7.922c-.47.47-.844.657-1.36.657c-.515 0-.914-.211-1.383-.657l-7.921-7.922c-.329-.304-.493-.726-.493-1.218c0-.961.75-1.688 1.711-1.688c.516 0 .938.164 1.243.516l2.906 2.93l2.367 2.835l-.188-4.968V16.758c0-1.031.75-1.758 1.758-1.758m23.131 18.516c1.031 0 1.781.656 1.781 1.664c0 .932-.673 1.57-1.62 1.635l-.16.005H33.96c-1.031 0-1.781-.656-1.781-1.64c0-.955.673-1.594 1.62-1.659l.16-.005zm.024-7.758c1.03 0 1.757.656 1.757 1.664c0 .932-.652 1.57-1.597 1.635l-.16.006H30.719c-1.031 0-1.758-.657-1.758-1.641c0-.955.652-1.594 1.598-1.659l.16-.005zm0-7.758c1.03 0 1.757.656 1.757 1.664c0 .933-.652 1.57-1.597 1.635l-.16.006h-15.57c-1.032 0-1.782-.657-1.782-1.64c0-.956.673-1.595 1.62-1.66l.161-.005z"/></svg>
React
import type { SVGProps } from "react";
export function F7SortDownCircle(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 4c13.255 0 24 10.745 24 24S41.255 52 28 52S4 41.255 4 28S14.745 4 28 4m0 3.429C16.639 7.429 7.429 16.639 7.429 28S16.639 48.571 28 48.571S48.571 39.361 48.571 28S39.361 7.429 28 7.429M20.197 15c1.031 0 1.758.726 1.758 1.758v15.21l-.187 4.946l2.367-2.812l2.906-2.93c.305-.328.75-.516 1.242-.516c.961 0 1.688.727 1.688 1.688c0 .492-.14.914-.446 1.218l-7.968 7.922c-.47.47-.844.657-1.36.657c-.515 0-.914-.211-1.383-.657l-7.921-7.922c-.329-.304-.493-.726-.493-1.218c0-.961.75-1.688 1.711-1.688c.516 0 .938.164 1.243.516l2.906 2.93l2.367 2.835l-.188-4.968V16.758c0-1.031.75-1.758 1.758-1.758m23.131 18.516c1.031 0 1.781.656 1.781 1.664c0 .932-.673 1.57-1.62 1.635l-.16.005H33.96c-1.031 0-1.781-.656-1.781-1.64c0-.955.673-1.594 1.62-1.659l.16-.005zm.024-7.758c1.03 0 1.757.656 1.757 1.664c0 .932-.652 1.57-1.597 1.635l-.16.006H30.719c-1.031 0-1.758-.657-1.758-1.641c0-.955.652-1.594 1.598-1.659l.16-.005zm0-7.758c1.03 0 1.757.656 1.757 1.664c0 .933-.652 1.57-1.597 1.635l-.16.006h-15.57c-1.032 0-1.782-.657-1.782-1.64c0-.956.673-1.595 1.62-1.66l.161-.005z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 4c13.255 0 24 10.745 24 24S41.255 52 28 52S4 41.255 4 28S14.745 4 28 4m0 3.429C16.639 7.429 7.429 16.639 7.429 28S16.639 48.571 28 48.571S48.571 39.361 48.571 28S39.361 7.429 28 7.429M20.197 15c1.031 0 1.758.726 1.758 1.758v15.21l-.187 4.946l2.367-2.812l2.906-2.93c.305-.328.75-.516 1.242-.516c.961 0 1.688.727 1.688 1.688c0 .492-.14.914-.446 1.218l-7.968 7.922c-.47.47-.844.657-1.36.657c-.515 0-.914-.211-1.383-.657l-7.921-7.922c-.329-.304-.493-.726-.493-1.218c0-.961.75-1.688 1.711-1.688c.516 0 .938.164 1.243.516l2.906 2.93l2.367 2.835l-.188-4.968V16.758c0-1.031.75-1.758 1.758-1.758m23.131 18.516c1.031 0 1.781.656 1.781 1.664c0 .932-.673 1.57-1.62 1.635l-.16.005H33.96c-1.031 0-1.781-.656-1.781-1.64c0-.955.673-1.594 1.62-1.659l.16-.005zm.024-7.758c1.03 0 1.757.656 1.757 1.664c0 .932-.652 1.57-1.597 1.635l-.16.006H30.719c-1.031 0-1.758-.657-1.758-1.641c0-.955.652-1.594 1.598-1.659l.16-.005zm0-7.758c1.03 0 1.757.656 1.757 1.664c0 .933-.652 1.57-1.597 1.635l-.16.006h-15.57c-1.032 0-1.782-.657-1.782-1.64c0-.956.673-1.595 1.62-1.66l.161-.005z"/></svg> </template>
CSS
.icon-sort-down-circle {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%204c13.255%200%2024%2010.745%2024%2024S41.255%2052%2028%2052S4%2041.255%204%2028S14.745%204%2028%204m0%203.429C16.639%207.429%207.429%2016.639%207.429%2028S16.639%2048.571%2028%2048.571S48.571%2039.361%2048.571%2028S39.361%207.429%2028%207.429M20.197%2015c1.031%200%201.758.726%201.758%201.758v15.21l-.187%204.946l2.367-2.812l2.906-2.93c.305-.328.75-.516%201.242-.516c.961%200%201.688.727%201.688%201.688c0%20.492-.14.914-.446%201.218l-7.968%207.922c-.47.47-.844.657-1.36.657c-.515%200-.914-.211-1.383-.657l-7.921-7.922c-.329-.304-.493-.726-.493-1.218c0-.961.75-1.688%201.711-1.688c.516%200%20.938.164%201.243.516l2.906%202.93l2.367%202.835l-.188-4.968V16.758c0-1.031.75-1.758%201.758-1.758m23.131%2018.516c1.031%200%201.781.656%201.781%201.664c0%20.932-.673%201.57-1.62%201.635l-.16.005H33.96c-1.031%200-1.781-.656-1.781-1.64c0-.955.673-1.594%201.62-1.659l.16-.005zm.024-7.758c1.03%200%201.757.656%201.757%201.664c0%20.932-.652%201.57-1.597%201.635l-.16.006H30.719c-1.031%200-1.758-.657-1.758-1.641c0-.955.652-1.594%201.598-1.659l.16-.005zm0-7.758c1.03%200%201.757.656%201.757%201.664c0%20.933-.652%201.57-1.597%201.635l-.16.006h-15.57c-1.032%200-1.782-.657-1.782-1.64c0-.956.673-1.595%201.62-1.66l.161-.005z%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%204c13.255%200%2024%2010.745%2024%2024S41.255%2052%2028%2052S4%2041.255%204%2028S14.745%204%2028%204m0%203.429C16.639%207.429%207.429%2016.639%207.429%2028S16.639%2048.571%2028%2048.571S48.571%2039.361%2048.571%2028S39.361%207.429%2028%207.429M20.197%2015c1.031%200%201.758.726%201.758%201.758v15.21l-.187%204.946l2.367-2.812l2.906-2.93c.305-.328.75-.516%201.242-.516c.961%200%201.688.727%201.688%201.688c0%20.492-.14.914-.446%201.218l-7.968%207.922c-.47.47-.844.657-1.36.657c-.515%200-.914-.211-1.383-.657l-7.921-7.922c-.329-.304-.493-.726-.493-1.218c0-.961.75-1.688%201.711-1.688c.516%200%20.938.164%201.243.516l2.906%202.93l2.367%202.835l-.188-4.968V16.758c0-1.031.75-1.758%201.758-1.758m23.131%2018.516c1.031%200%201.781.656%201.781%201.664c0%20.932-.673%201.57-1.62%201.635l-.16.005H33.96c-1.031%200-1.781-.656-1.781-1.64c0-.955.673-1.594%201.62-1.659l.16-.005zm.024-7.758c1.03%200%201.757.656%201.757%201.664c0%20.932-.652%201.57-1.597%201.635l-.16.006H30.719c-1.031%200-1.758-.657-1.758-1.641c0-.955.652-1.594%201.598-1.659l.16-.005zm0-7.758c1.03%200%201.757.656%201.757%201.664c0%20.933-.652%201.57-1.597%201.635l-.16.006h-15.57c-1.032%200-1.782-.657-1.782-1.64c0-.956.673-1.595%201.62-1.66l.161-.005z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/sort-down-circle.svg?color=%231a73e8&size=48
