josemi/icons
v0.6.1
grid-horizontal
Added: v0.4.0
gridhorizontal
Download
Download the icon as SVG image to use or edit it.
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

Embed this icon within HTML

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="M3 7C3 7 3 6 4 6L6 6C7 6 7 7 7 7L7 9C7 9 7 10 6 10L4 10C3 10 3 9 3 9L3 7ZM3 15C3 15 3 14 4 14L6 14C7 14 7 15 7 15L7 17C7 17 7 18 6 18L4 18C3 18 3 17 3 17L3 15ZM10 7C10 7 10 6 11 6L13 6C14 6 14 7 14 7L14 9C14 9 14 10 13 10L11 10C10 10 10 9 10 9L10 7ZM10 15C10 15 10 14 11 14L13 14C14 14 14 15 14 15L14 17C14 17 14 18 13 18L11 18C10 18 10 17 10 17L10 15ZM17 7C17 7 17 6 18 6L20 6C21 6 21 7 21 7L21 9C21 9 21 10 20 10L18 10C17 10 17 9 17 9L17 7ZM17 15C17 15 17 14 18 14L20 14C21 14 21 15 21 15L21 17C21 17 21 18 20 18L18 18C17 18 17 17 17 17L17 15Z" />
</svg>

Using as a React Component

You can integrate this icon in your React application using our React icons components. First install the package using YARN or NPM:

$ yarn add @josemi-icons/react

Now you can import this icon in your React application

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

Alternatively, if you only need this icon jou can just copy and paste the following component into your React application:

const GridHorizontalIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em">
        <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7C3 7 3 6 4 6L6 6C7 6 7 7 7 7L7 9C7 9 7 10 6 10L4 10C3 10 3 9 3 9L3 7ZM3 15C3 15 3 14 4 14L6 14C7 14 7 15 7 15L7 17C7 17 7 18 6 18L4 18C3 18 3 17 3 17L3 15ZM10 7C10 7 10 6 11 6L13 6C14 6 14 7 14 7L14 9C14 9 14 10 13 10L11 10C10 10 10 9 10 9L10 7ZM10 15C10 15 10 14 11 14L13 14C14 14 14 15 14 15L14 17C14 17 14 18 13 18L11 18C10 18 10 17 10 17L10 15ZM17 7C17 7 17 6 18 6L20 6C21 6 21 7 21 7L21 9C21 9 21 10 20 10L18 10C17 10 17 9 17 9L17 7ZM17 15C17 15 17 14 18 14L20 14C21 14 21 15 21 15L21 17C21 17 21 18 20 18L18 18C17 18 17 17 17 17L17 15Z" />
    </svg>
);

You can now use the icon component in your React application like any other React component.

Designed by Josemi. Source code available on GitHub.