Re Order Dots Horizontal icon
Used as handles for content. The Re Order Dots Horizontal 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 Re Order Dots Horizontal 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 { ReOrderDotsHorizontal24Regular, ReOrderDotsHorizontal24Filled } from "@fluentui/react-icons";
export function Example() {
return <ReOrderDotsHorizontal24Regular aria-label="Re Order Dots Horizontal" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_re_order_dots_horizontal_24_regular.svg" width="24" height="24" alt="Re Order Dots Horizontal"> 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="M7 15.5C7 16.3284 6.32843 17 5.5 17C4.67157 17 4 16.3284 4 15.5C4 14.6716 4.67157 14 5.5 14C6.32843 14 7 14.6716 7 15.5ZM7 8.5C7 9.32843 6.32843 10 5.5 10C4.67157 10 4 9.32843 4 8.5C4 7.67157 4.67157 7 5.5 7C6.32843 7 7 7.67157 7 8.5ZM14 15.5C14 16.3284 13.3284 17 12.5 17C11.6716 17 11 16.3284 11 15.5C11 14.6716 11.6716 14 12.5 14C13.3284 14 14 14.6716 14 15.5ZM14 8.5C14 9.32843 13.3284 10 12.5 10C11.6716 10 11 9.32843 11 8.5C11 7.67157 11.6716 7 12.5 7C13.3284 7 14 7.67157 14 8.5ZM21 15.5C21 16.3284 20.3284 17 19.5 17C18.6716 17 18 16.3284 18 15.5C18 14.6716 18.6716 14 19.5 14C20.3284 14 21 14.6716 21 15.5ZM21 8.5C21 9.32843 20.3284 10 19.5 10C18.6716 10 18 9.32843 18 8.5C18 7.67157 18.6716 7 19.5 7C20.3284 7 21 7.67157 21 8.5Z" 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/re_order_dots_horizontal_24_regular.svg";Details
| Name | Re Order Dots Horizontal |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_re_order_dots_horizontal_24_regular.svg |
| Filled file | ic_fluent_re_order_dots_horizontal_24_filled.svg |
| React components | ReOrderDotsHorizontal24Regular, ReOrderDotsHorizontal24Filled |
| License | MIT (© Microsoft Corporation) |