Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const SquareSpace = ({
size = 24,
color = "currentColor",
className,
...props
}: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width={size}
height={size}
fill={color}
className={className}
{...props}
>
<path d="M20.886 9.264c-1.502-1.5-3.941-1.5-5.475 0l-6.13 6.131a.98.98 0 0 0 0 1.377.98.98 0 0 0 1.376 0l6.13-6.131a1.925 1.925 0 0 1 2.722 2.723l-6.037 6.035c.751.75 1.971.75 2.723 0l4.66-4.66c1.531-1.534 1.531-3.973.031-5.475m-2.064 2.033a.98.98 0 0 0-1.376 0l-6.134 6.162c-.751.75-1.97.75-2.72 0-.376-.375-1.002-.375-1.377 0s-.375 1.002 0 1.375c1.502 1.502 3.942 1.502 5.475 0l6.131-6.129c.375-.406.375-1.033.001-1.408m-2.035-6.129c-1.501-1.502-3.941-1.502-5.475 0l-6.131 6.129a.98.98 0 0 0 0 1.375.98.98 0 0 0 1.377 0l6.168-6.129a1.934 1.934 0 0 1 2.727 0 .98.98 0 0 0 1.376 0c.352-.406.352-1-.024-1.375zm-2.063 2.031a.98.98 0 0 0-1.376 0l-6.131 6.164a1.933 1.933 0 0 1-2.723 0 1.927 1.927 0 0 1 0-2.723l6.037-6.039a1.93 1.93 0 0 0-2.722 0L3.118 9.264c-1.501 1.502-1.501 3.941 0 5.475 1.501 1.502 3.94 1.502 5.475 0l6.129-6.131c.377-.408.377-1.033 0-1.408z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
SquareSpace Icon — Free SVG Component The SquareSpace icon is a free, open-source SVG icon component built with TypeScript for React, Next.js, Vue, Remix, Svelte, and Astro projects. No npm install or package dependency required — just copy the component code and paste it into your project.
How to use SquareSpace icon in React Import the SquareSpace component from your icons folder. Use it as a standard React component with props: size (number), color (string), className (string), and all standard SVG attributes via spread props.
Example: <SquareSpace size={24} color=“currentColor“ className=“shrink-0“ />
Features Zero dependencies — no package install needed TypeScript ready with full type safety Fully customizable size, color, and className Works with Tailwind CSS, styled-components, CSS modules Accessible — supports aria attributes Tree-shakeable — only import what you use MIT licensed — free for commercial use Compatible frameworks React, Next.js (App Router & Pages Router), Vue, Remix, Svelte, Astro, Nuxt, Gatsby, Vite, Angular, Qwik.
Category: brands Browse more brands icons in the Next Icons library. All icons are hand-crafted SVGs optimized for web performance.