Select Object Skew icon

Use the Select Object Skew 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 { SelectObjectSkew24Regular, SelectObjectSkew24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SelectObjectSkew24Regular aria-label="Select Object Skew" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_select_object_skew_24_regular.svg" width="24" height="24" alt="Select Object Skew">

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.65843ZM14 19C14 20.1046 14.8954 21 16 21C17.1046 21 18 20.1046 18 19C18 17.8954 17.1046 17 16 17C14.8954 17 14 17.8954 14 19ZM4 21C2.89543 21 2 20.1046 2 19C2 17.9645 2.787 17.1127 3.79551 17.0103C3.86275 17.0035 3.93096 17 4 17C4.46411 17 4.89129 17.1581 5.23064 17.4233C5.50502 17.6378 5.72198 17.9223 5.85462 18.25C5.86296 18.2706 5.87097 18.2914 5.87864 18.3123C5.95715 18.5268 6 18.7584 6 19C6 19.2652 5.94837 19.5184 5.85462 19.75C5.55793 20.483 4.83934 21 4 21ZM6.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.65843ZM6.48086 7.58749L4.07701 16.001C4.60253 16.0142 5.09448 16.1626 5.51941 16.4127L7.9233 7.99904C7.39777 7.98585 6.90581 7.83752 6.48086 7.58749ZM17.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.75ZM13.0945 19.75C13.0328 19.5103 13 19.259 13 19C13 18.741 13.0328 18.4897 13.0945 18.25H6.90549C6.96719 18.4897 7 18.741 7 19C7 19.259 6.96719 19.5103 6.90549 19.75H13.0945ZM16.077 16.001L18.4809 7.58749C18.9058 7.83752 19.3978 7.98585 19.9233 7.99904L17.5194 16.4127C17.0945 16.1626 16.6025 16.0142 16.077 16.001Z" 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_24_regular.svg";

Details

Keywords

selectionmanipulatecreate