rectangle icon

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

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

The same icon in other sets

rectangleBoxIcons v2 rectangleBoxIcons v2 Solid rectangleFramework7 Icons rectangleIconPark Outline rectangleIconPark Solid 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

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="#2F88FF" stroke="#000" stroke-width="4" d="M38 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44H38C39.1046 44 40 43.1046 40 42V6C40 4.89543 39.1046 4 38 4Z"/></svg>

React

import type { SVGProps } from "react";

export function IconParkRectangle(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#2F88FF" stroke="#000" strokeWidth="4" d="M38 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44H38C39.1046 44 40 43.1046 40 42V6C40 4.89543 39.1046 4 38 4Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#2F88FF" stroke="#000" stroke-width="4" d="M38 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44H38C39.1046 44 40 43.1046 40 42V6C40 4.89543 39.1046 4 38 4Z"/></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%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20d%3D%22M38%204H10C8.89543%204%208%204.89543%208%206V42C8%2043.1046%208.89543%2044%2010%2044H38C39.1046%2044%2040%2043.1046%2040%2042V6C40%204.89543%2039.1046%204%2038%204Z%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%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20d%3D%22M38%204H10C8.89543%204%208%204.89543%208%206V42C8%2043.1046%208.89543%2044%2010%2044H38C39.1046%2044%2040%2043.1046%2040%2042V6C40%204.89543%2039.1046%204%2038%204Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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