Call Chevron Down icon
Used in call scenarios. The Call Chevron Down icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Call Chevron Down icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { CallChevronDown24Regular, CallChevronDown24Filled } from "@fluentui/react-icons";
export function Example() {
return <CallChevronDown24Regular aria-label="Call Chevron Down" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_call_chevron_down_24_regular.svg" width="24" height="24" alt="Call Chevron Down"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.22384 2.06715C7.54631 1.66852 8.95921 2.31228 9.5256 3.57203L10.427 5.57789C10.9097 6.65163 10.656 7.9136 9.79513 8.71656L8.30002 10.1101C8.25649 10.1508 8.22948 10.2062 8.22287 10.2654C8.17863 10.6626 8.44759 11.4356 9.06759 12.5095C9.51864 13.2908 9.92713 13.8391 10.2746 14.1472C10.5164 14.3616 10.6494 14.4081 10.7063 14.3914L12.717 13.7771C13.8426 13.433 15.0625 13.8431 15.7512 14.7976L17.0315 16.573C17.8374 17.6902 17.6928 19.2312 16.6926 20.1785L15.8059 21.0173C14.8496 21.923 13.4886 22.2609 12.2199 21.907C9.4659 21.1383 6.99624 18.8141 4.78439 14.9832C2.56944 11.1468 1.79157 7.84187 2.50802 5.07008C2.83593 3.80174 3.80257 2.79684 5.05685 2.41871L6.22384 2.06715ZM8.15744 4.18726C7.9 3.61461 7.2576 3.3215 6.65646 3.50269L5.48947 3.85426C4.73693 4.08118 4.15785 4.68504 3.96115 5.44605C3.35857 7.77754 4.04701 10.7064 6.08322 14.2332C8.11665 17.7551 10.3054 19.8158 12.6223 20.4627C13.3835 20.6751 14.2008 20.4719 14.7746 19.9285L15.6613 19.0896C16.116 18.659 16.1821 17.9578 15.8156 17.45L14.5344 15.6755C14.2213 15.2417 13.6671 15.0553 13.1555 15.2117L11.1399 15.8279C9.97027 16.1763 8.90876 15.2341 7.76877 13.2595C7.00058 11.9289 6.64209 10.9003 6.73166 10.0984C6.77809 9.68312 6.97198 9.29846 7.27756 9.01344L8.7717 7.61988C9.16298 7.255 9.27897 6.68114 9.05978 6.19312L8.15744 4.18726ZM20.7199 4.71949C21.0128 4.42682 21.4877 4.42667 21.7805 4.71949C22.0733 5.01231 22.0732 5.48713 21.7805 5.78004L17.7805 9.78004C17.4876 10.0729 17.0128 10.0729 16.7199 9.78004L12.7199 5.78004C12.427 5.48714 12.427 5.01238 12.7199 4.71949C13.0128 4.42682 13.4877 4.42667 13.7805 4.71949L17.2502 8.18922L20.7199 4.71949Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/call_chevron_down_24_regular.svg";Details
| Name | Call Chevron Down |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_call_chevron_down_24_regular.svg |
| Filled file | ic_fluent_call_chevron_down_24_filled.svg |
| React components | CallChevronDown24Regular, CallChevronDown24Filled |
| License | MIT (© Microsoft Corporation) |