chevron collapse icon
chevron-collapse from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- chevron-collapse
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
Related icons in IonIcons
Use the chevron collapse icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M117.863 88.282c-8.681 10.017-7.598 25.174 2.419 33.855l120 104c9.02 7.818 22.416 7.818 31.436 0l120-104c10.017-8.681 11.1-23.838 2.419-33.855s-23.839-11.099-33.855-2.418L256 176.241L151.718 85.864c-10.016-8.681-25.174-7.598-33.855 2.418m0 335.436c-8.681-10.017-7.598-25.174 2.419-33.855l120-104c9.02-7.818 22.416-7.818 31.436 0l120 104c10.017 8.681 11.1 23.838 2.419 33.855s-23.839 11.099-33.855 2.418L256 335.759l-104.282 90.377c-10.016 8.681-25.174 7.598-33.855-2.418"/></svg>
React
import type { SVGProps } from "react";
export function IonChevronCollapse(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M117.863 88.282c-8.681 10.017-7.598 25.174 2.419 33.855l120 104c9.02 7.818 22.416 7.818 31.436 0l120-104c10.017-8.681 11.1-23.838 2.419-33.855s-23.839-11.099-33.855-2.418L256 176.241L151.718 85.864c-10.016-8.681-25.174-7.598-33.855 2.418m0 335.436c-8.681-10.017-7.598-25.174 2.419-33.855l120-104c9.02-7.818 22.416-7.818 31.436 0l120 104c10.017 8.681 11.1 23.838 2.419 33.855s-23.839 11.099-33.855 2.418L256 335.759l-104.282 90.377c-10.016 8.681-25.174 7.598-33.855-2.418"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M117.863 88.282c-8.681 10.017-7.598 25.174 2.419 33.855l120 104c9.02 7.818 22.416 7.818 31.436 0l120-104c10.017-8.681 11.1-23.838 2.419-33.855s-23.839-11.099-33.855-2.418L256 176.241L151.718 85.864c-10.016-8.681-25.174-7.598-33.855 2.418m0 335.436c-8.681-10.017-7.598-25.174 2.419-33.855l120-104c9.02-7.818 22.416-7.818 31.436 0l120 104c10.017 8.681 11.1 23.838 2.419 33.855s-23.839 11.099-33.855 2.418L256 335.759l-104.282 90.377c-10.016 8.681-25.174 7.598-33.855-2.418"/></svg> </template>
CSS
.icon-chevron-collapse {
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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M117.863%2088.282c-8.681%2010.017-7.598%2025.174%202.419%2033.855l120%20104c9.02%207.818%2022.416%207.818%2031.436%200l120-104c10.017-8.681%2011.1-23.838%202.419-33.855s-23.839-11.099-33.855-2.418L256%20176.241L151.718%2085.864c-10.016-8.681-25.174-7.598-33.855%202.418m0%20335.436c-8.681-10.017-7.598-25.174%202.419-33.855l120-104c9.02-7.818%2022.416-7.818%2031.436%200l120%20104c10.017%208.681%2011.1%2023.838%202.419%2033.855s-23.839%2011.099-33.855%202.418L256%20335.759l-104.282%2090.377c-10.016%208.681-25.174%207.598-33.855-2.418%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M117.863%2088.282c-8.681%2010.017-7.598%2025.174%202.419%2033.855l120%20104c9.02%207.818%2022.416%207.818%2031.436%200l120-104c10.017-8.681%2011.1-23.838%202.419-33.855s-23.839-11.099-33.855-2.418L256%20176.241L151.718%2085.864c-10.016-8.681-25.174-7.598-33.855%202.418m0%20335.436c-8.681-10.017-7.598-25.174%202.419-33.855l120-104c9.02-7.818%2022.416-7.818%2031.436%200l120%20104c10.017%208.681%2011.1%2023.838%202.419%2033.855s-23.839%2011.099-33.855%202.418L256%20335.759l-104.282%2090.377c-10.016%208.681-25.174%207.598-33.855-2.418%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/chevron-collapse.svg?color=%231a73e8&size=48
