josemi/icons

vector-rectangle

v0.7.0

Download

Download the icon as SVG image.

Download Icon

Customize icon

Set your custom size or color and download the icon as SVG or PNG image.

Width

Height

Color

Get SVG

Get PNG

Using as SVG

Copy and paste the following SVG code into your HTML file where you want the icon to appear. Then, you can customize the SVG attributes, such as size or color, using inline styling or CSS classes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6C4 6 3 6 3 7L3 9C3 10 4 10 4 10L6 10C6 10 7 10 7 9L7 7C7 6 6 6 6 6L4 6ZM18 6C18 6 17 6 17 7L17 9C17 10 18 10 18 10L20 10C20 10 21 10 21 9L21 7C21 6 20 6 20 6L18 6ZM18 14C18 14 17 14 17 15L17 17C17 18 18 18 18 18L20 18C20 18 21 18 21 17L21 15C21 14 20 14 20 14L18 14ZM4 14C4 14 3 14 3 15L3 17C3 18 4 18 4 18L6 18C6 18 7 18 7 17L7 15C7 14 6 14 6 14L4 14ZM8 16L16 16M5 14L5 10M8 8L16 8M19 10L19 14" />
</svg>

Using with React

Install @josemi-icons/react and import the icon component in your React application:

import {VectorRectangleIcon} from "@josemi-icons/react";

const MyComponent = () => {
    return (
        <VectorRectangleIcon />
    );
};

Using with CSS

Install @josemi-icons/css and include the icon as a CSS class:

<i class="ji-vector-rectangle"></i>