Select Object Skew Edit icon
Used in canvas selection states. The Select Object Skew Edit 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 Select Object Skew Edit 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 { SelectObjectSkewEdit24Regular, SelectObjectSkewEdit24Filled } from "@fluentui/react-icons";
export function Example() {
return <SelectObjectSkewEdit24Regular aria-label="Select Object Skew Edit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_select_object_skew_edit_24_regular.svg" width="24" height="24" alt="Select Object Skew Edit"> 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="M18.8818 6.65843C19.201 6.87408 19.5858 7 20 7C20.0716 7 20.1423 6.99624 20.2119 6.98891C21.2169 6.88308 22 6.033 22 5C22 3.89543 21.1046 3 20 3C19.1607 3 18.4421 3.51704 18.1454 4.25C18.137 4.27061 18.129 4.29139 18.1214 4.31233C18.0428 4.52676 18 4.75838 18 5C18 5.26522 18.0516 5.5184 18.1454 5.75C18.2781 6.07778 18.4951 6.36238 18.7696 6.57686C18.806 6.60531 18.8434 6.63252 18.8818 6.65843ZM2 19C2 20.1046 2.89543 21 4 21C4.83934 21 5.55793 20.483 5.85462 19.75C5.94837 19.5184 6 19.2652 6 19C6 18.7584 5.95715 18.5268 5.87864 18.3123C5.87097 18.2914 5.86296 18.2706 5.85462 18.25C5.72198 17.9223 5.50502 17.6378 5.23064 17.4233C4.89129 17.1581 4.46411 17 4 17C3.93096 17 3.86275 17.0035 3.79551 17.0103C2.787 17.1127 2 17.9645 2 19ZM6.88178 6.65843C7.20098 6.87408 7.58579 7 8 7C8.07158 7 8.14228 6.99624 8.21191 6.98891C8.95883 6.91025 9.58323 6.42045 9.85462 5.75C9.86296 5.72939 9.87097 5.70861 9.87864 5.68767C9.95715 5.47324 10 5.24162 10 5C10 4.73478 9.94837 4.48161 9.85462 4.25C9.55793 3.51704 8.83934 3 8 3C6.89543 3 6 3.89543 6 5C6 5.64058 6.30116 6.21082 6.76961 6.57687C6.80601 6.60531 6.84342 6.63252 6.88178 6.65843ZM4.07701 16.001L6.48086 7.58749C6.90581 7.83752 7.39777 7.98585 7.9233 7.99904L5.51941 16.4127C5.09448 16.1626 4.60253 16.0142 4.07701 16.001ZM17.0945 5.75H10.9055C10.9672 5.51028 11 5.25897 11 5C11 4.74103 10.9672 4.48971 10.9055 4.25H17.0945C17.0328 4.48971 17 4.74103 17 5C17 5.25897 17.0328 5.51028 17.0945 5.75ZM11.5209 19.5768C11.6414 19.0948 11.8577 18.6438 12.1551 18.25H6.90549C6.96719 18.4897 7 18.741 7 19C7 19.259 6.96719 19.5103 6.90549 19.75H11.4776L11.5209 19.5768ZM19.9233 7.99904L18.9119 11.5388C18.7283 11.6597 18.5542 11.8008 18.3927 11.9624L16.7662 13.5889L18.4809 7.58749C18.9058 7.83752 19.3978 7.98585 19.9233 7.99904ZM19.0999 12.6695L13.1974 18.5719C12.8533 18.916 12.6092 19.3472 12.4911 19.8194L12.0334 21.6501C11.8344 22.4462 12.5556 23.1674 13.3517 22.9683L15.1824 22.5106C15.6545 22.3926 16.0857 22.1485 16.4299 21.8043L22.3323 15.9019C23.2249 15.0093 23.2249 13.5621 22.3323 12.6695C21.4397 11.7768 19.9925 11.7768 19.0999 12.6695Z" 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/select_object_skew_edit_24_regular.svg";Details
| Name | Select Object Skew Edit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_select_object_skew_edit_24_regular.svg |
| Filled file | ic_fluent_select_object_skew_edit_24_filled.svg |
| React components | SelectObjectSkewEdit24Regular, SelectObjectSkewEdit24Filled |
| License | MIT (© Microsoft Corporation) |