Select Object Skew Dismiss icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.57687C18.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.48972 10.9055 4.25H17.0945C17.0328 4.48972 17 4.74103 17 5C17 5.25897 17.0328 5.51028 17.0945 5.75ZM11.4 19.75C11.2242 19.2737 11.1027 18.7712 11.0428 18.25H6.90549C6.96719 18.4897 7 18.741 7 19C7 19.259 6.96719 19.5103 6.90549 19.75H11.4ZM19.9233 7.99904L19.0152 11.1775C18.5308 11.0619 18.0255 11.0005 17.5059 11L18.4809 7.58749C18.9058 7.83752 19.3978 7.98585 19.9233 7.99904ZM23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12C20.5376 12 23 14.4624 23 17.5ZM15.8536 15.1464C15.6583 14.9512 15.3417 14.9512 15.1464 15.1464C14.9512 15.3417 14.9512 15.6583 15.1464 15.8536L16.7929 17.5L15.1464 19.1464C14.9512 19.3417 14.9512 19.6583 15.1464 19.8536C15.3417 20.0488 15.6583 20.0488 15.8536 19.8536L17.5 18.2071L19.1464 19.8536C19.3417 20.0488 19.6583 20.0488 19.8536 19.8536C20.0488 19.6583 20.0488 19.3417 19.8536 19.1464L18.2071 17.5L19.8536 15.8536C20.0488 15.6583 20.0488 15.3417 19.8536 15.1464C19.6583 14.9512 19.3417 14.9512 19.1464 15.1464L17.5 16.7929L15.8536 15.1464Z" 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_dismiss_24_regular.svg";

Details

Keywords

selectionmanipulatecreate