CoolShapes is an open-source collection of 100+ abstract shapes with grainy gradients, available in multiple formats (SVG, JSX, PNG) for use in design and development projects.
What is CoolShapes?
CoolShapes is an open-source library of 100+ abstract vector shapes featuring grainy gradients, created by @realvjy and the team at overlayz. It takes no input—users browse or download pre-made shapes—and outputs SVG, JSX, or PNG files. The project is hosted on GitHub and licensed under MIT, free for both personal and commercial use.
Key Features
- Open-source and MIT licensed — The entire collection is free to use, modify, and redistribute without restrictions.
- Multiple formats — Each shape can be copied as raw SVG, exported as JSX for React components, or downloaded as a PNG image.
- React package — A dedicated npm package (
coolshapes-react) allows developers to import shapes as React components with props liketype,index,noise, andsize. - Figma file — Designers can access a Figma file containing all shapes for direct use in design tools.
- Bundle download — All shapes are available for bulk download as a single archive.
- Grainy gradient effect — Each shape includes a subtle noise texture and gradient, giving a modern, tactile aesthetic.
- 100+ unique shapes — The collection includes variations of stars, circles, polygons, and other abstract forms, with multiple indices per type.
Who is it for?
- UI/UX designers — Quickly add abstract visual elements to web or mobile mockups without creating them from scratch. Use the Figma file to drag-and-drop shapes into designs.
- React developers — Integrate shapes directly into React applications using the
coolshapes-reactpackage, with props to control appearance (e.g.,<Coolshape type="star" index="1" noise="true" />). - Indie makers and content creators — Download shapes as SVG or PNG for use in landing pages, social media graphics, or presentation slides, all under a permissive MIT license.
What can you do with CoolShapes?
- Enhance landing pages — Drop in a grainy gradient shape as a hero background or decorative element to add visual interest without heavy design work.
- Build app illustrations — Use the React package to programmatically display shapes with consistent styling across an entire codebase.
- Create brand assets — Mix and match shapes in design tools to generate unique patterns or icons for branding projects.
How does CoolShapes work?
Users can either browse the website, copy SVG directly, or download the Figma file for design work. Developers install the coolshapes-react package via yarn add coolshapes-react or npm i coolshapes-react, then import components like { Coolshape } or named exports like { Star, Circle }. The shapes are rendered inline with configurable noise and size. A live demo is available at demo.coolshap.es.
FAQ
Is CoolShapes free?
Yes, the entire collection is free and open-source under the MIT license, allowing both personal and commercial use without fees.
Can I use these shapes in my commercial project?
Absolutely. The MIT license permits any use, including in paid products and SaaS applications.
What formats are available?
Shapes are available as SVG code, JSX components (for React), and downloadable PNG images. The Figma source file is also provided.
Does the React package work with Next.js or other frameworks?
The coolshapes-react package is a standard React component library and should work with any React-based framework, including Next.js, as long as the environment supports JSX.
