rectangle icon

rectangle from IconPark Solid by ByteDance · Solid · Graphics · Apache-2.0 Free for personal and commercial use.

Name: rectangle
Set: IconPark Solid
Style: Solid
Category: Graphics
Viewbox: 48×48
License: Apache 2.0

The same icon in other sets

rectangleBoxIcons v2 rectangleBoxIcons v2 Solid rectangleFramework7 Icons rectangleIconPark rectangleIconPark Outline rectangleIconPark TwoTone rectangleJam Icons rectangleMaterial Symbols rectangleMaterial Symbols Light rectangleMaterial Design Icons rectangle-fillMingCute Icon rectangleMyna UI Icons rectanglePhosphor rectangle-fillRemix Icon rectangleTabler Icons rectangleTDesign Icons

More graphics icons from IconPark Solid

diamond-one diamond-three diamond-two hexagon-one octagon oval-one parallelogram pentagon-one quadrilateral rectangle-one rectangle-small right-angle round square square-small trapezoid triangle rectangle-tear rectangle-x

Use the rectangle icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" stroke="currentColor" stroke-width="4" d="M38 4H10a2 2 0 0 0-2 2v36a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z"/></svg>

React

import type { SVGProps } from "react";

export function IconParkSolidRectangle(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" stroke="currentColor" strokeWidth="4" d="M38 4H10a2 2 0 0 0-2 2v36a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" stroke="currentColor" stroke-width="4" d="M38 4H10a2 2 0 0 0-2 2v36a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z"/></svg>
</template>

CSS

.icon-rectangle {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20stroke-width%3D%224%22%20d%3D%22M38%204H10a2%202%200%200%200-2%202v36a2%202%200%200%200%202%202h28a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20stroke-width%3D%224%22%20d%3D%22M38%204H10a2%202%200%200%200-2%202v36a2%202%200%200%200%202%202h28a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park-solid/rectangle.svg?color=%231a73e8&size=48