Slide Hide icon

Use the Slide Hide 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 { SlideHide24Regular, SlideHide24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SlideHide24Regular aria-label="Slide Hide" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_slide_hide_24_regular.svg" width="24" height="24" alt="Slide Hide">

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.75 3C4.12665 3 2 5.12665 2 7.75V14.75C2 15.9926 3.00736 17 4.25 17H4.5V15.5H4.25C3.83579 15.5 3.5 15.1642 3.5 14.75V7.75C3.5 5.95507 4.95507 4.5 6.75 4.5H16.75C17.1642 4.5 17.5 4.83579 17.5 5.25V5.5H19V5.25C19 4.00736 17.9926 3 16.75 3H6.75ZM19.2541 6.5H19.75C20.9409 6.5 21.9156 7.42516 21.9948 8.59595L22 8.75V9.75352C22 10.1677 21.6642 10.5035 21.25 10.5035C20.8703 10.5035 20.5565 10.2214 20.5068 9.85529L20.5 9.75352V8.75C20.5 8.3703 20.2178 8.05651 19.8518 8.00685L19.75 8H19.2541C18.8399 8 18.5041 7.66421 18.5041 7.25C18.5041 6.8703 18.7863 6.55651 19.1523 6.50685L19.2541 6.5ZM6.25 11.5008C6.6297 11.5008 6.94349 11.7829 6.99315 12.149L7 12.2508V14.7453C7 15.1595 6.66421 15.4953 6.25 15.4953C5.8703 15.4953 5.55651 15.2131 5.50685 14.847L5.5 14.7453V12.2508C5.5 11.8366 5.83579 11.5008 6.25 11.5008ZM6.99315 17.1435C6.94349 16.7774 6.6297 16.4953 6.25 16.4953C5.83579 16.4953 5.5 16.831 5.5 17.2453V18.25L5.50519 18.404C5.58436 19.5748 6.55914 20.5 7.75 20.5H8.25L8.35177 20.4932C8.71785 20.4435 9 20.1297 9 19.75C9 19.3358 8.66421 19 8.25 19H7.75L7.64823 18.9932C7.28215 18.9435 7 18.6297 7 18.25V17.2453L6.99315 17.1435ZM22 17.2453C22 16.831 21.6642 16.4953 21.25 16.4953C20.8358 16.4953 20.5 16.831 20.5 17.2453V18.25C20.5 18.6642 20.1642 19 19.75 19H18.7471C18.3329 19 17.9971 19.3358 17.9971 19.75C17.9971 20.1642 18.3329 20.5 18.7471 20.5H19.75C20.9926 20.5 22 19.4926 22 18.25V17.2453ZM14.7529 19H16.248C16.6622 19 16.998 19.3358 16.998 19.75C16.998 20.1297 16.7158 20.4435 16.3497 20.4932L16.248 20.5H14.7529C14.3387 20.5 14.0029 20.1642 14.0029 19.75C14.0029 19.3703 14.285 19.0565 14.6511 19.0068L14.7529 19ZM12.2463 19H10.7507L10.6489 19.0068C10.2828 19.0565 10.0007 19.3703 10.0007 19.75C10.0007 20.1642 10.3364 20.5 10.7507 20.5H12.2463L12.3481 20.4932C12.7142 20.4435 12.9963 20.1297 12.9963 19.75C12.9963 19.3358 12.6605 19 12.2463 19ZM21.9932 12.149C21.9435 11.7829 21.6297 11.5008 21.25 11.5008C20.8358 11.5008 20.5 11.8366 20.5 12.2508V14.7453L20.5068 14.847C20.5565 15.2131 20.8703 15.4953 21.25 15.4953C21.6642 15.4953 22 15.1595 22 14.7453V12.2508L21.9932 12.149ZM9.50281 7.25C9.50281 6.83579 9.16702 6.5 8.75281 6.5H7.75C6.50736 6.5 5.5 7.50736 5.5 8.75V9.75352C5.5 10.1677 5.83579 10.5035 6.25 10.5035C6.66421 10.5035 7 10.1677 7 9.75352V8.75C7 8.33579 7.33579 8 7.75 8H8.75281C9.16702 8 9.50281 7.66421 9.50281 7.25ZM15.249 6.5H16.752C17.1662 6.5 17.502 6.83579 17.502 7.25C17.502 7.6297 17.2198 7.94349 16.8537 7.99315L16.752 8H15.249C14.8348 8 14.499 7.66421 14.499 7.25C14.499 6.8703 14.7811 6.55651 15.1472 6.50685L15.249 6.5ZM12.7451 6.5H11.25L11.1482 6.50685C10.7822 6.55651 10.5 6.8703 10.5 7.25C10.5 7.66421 10.8358 8 11.25 8H12.7451L12.8469 7.99315C13.2129 7.94349 13.4951 7.6297 13.4951 7.25C13.4951 6.83579 13.1593 6.5 12.7451 6.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/slide_hide_24_regular.svg";

Details

Keywords

slidelandscapedocumentpresentationviewhint