# coolshapes

> Open-source abstract shapes with grainy gradients for design and dev projects.

coolshapes is an open-source library of over 100 abstract vector shapes styled with grainy gradients. It allows designers and developers to grab assets as SVGs, PNGs, a ready-to-use Figma file, or a dedicated React component package under an MIT license.

Website: https://coolshap.es/

## What it is for

- Drop decorative gradient shapes into Figma UI mockups
- Render stylized vector shapes directly in React applications using a component package
- Copy raw SVG or JSX code snippets straight into web templates

## Features

- 100+ abstract shapes across multiple categories like stars, circles, and polygons
- Grainy gradient and noise texture styling
- Direct SVG, JSX, and PNG copy/download options
- Available as an installable React package (coolshapes-react)
- Official Figma community file available for download
- Licensed under MIT for personal and commercial projects

## Pricing

Free and open-source (MIT license)

## Details

- Type: Website
- Category: [Design](https://xiry.app/topics/design.md)
- Open source: yes
- Platforms: Web, Code library
- For: UI/UX designers, graphic designers, and front-end developers
- Tags: shapes, abstract, gradients, svg, figma, react, open source

## Why it was saved

- [@kalypsodesigns, 20 February 2025](https://www.instagram.com/p/DGSdxBZR3QD/): Provides ready-to-use vector assets available as a Figma file, direct SVG downloads, or an installable React package under the MIT license.
- [@tura.creator, 10 December 2024](https://www.instagram.com/reel/DDZyuvfO8EJ/): Enables designers to quickly copy and paste customizable abstract vector shapes into Figma or code for icons, logos, and UI accents.
- [@pJacquelDesign, 16 November 2025](https://x.com/pJacquelDesign/status/1990102603825660150): Download as Figma file, download all, or React package; MIT license

## Related

- [Iconoir](https://xiry.app/resources/iconoir): Open-source icon library available across web frameworks, design tools, and SVG (Website, Free)
- [Keyline Icons](https://xiry.app/resources/keyline-icons): Free MIT-licensed icon library with four styles and two corner variants. (Website, Free)
- [Shader Gradient](https://xiry.app/resources/shader-gradient): Design tool for generating animated 3D moving gradients and web components. (Web app, Free)
- [Mage Icons](https://xiry.app/resources/mage-icons): Open-source icon system available for personal and commercial projects. (Website, Open source)
- [Stash Icons](https://xiry.app/resources/stash-icons): Open-source 24x24 SVG and React icon library across five styles. (Website, Open source)
- [Tabler Icons](https://xiry.app/resources/tabler-icons): Over 6,200 free and open-source SVG icons for web projects. (Website, Open source)

Updated 3 October 2026. Page: https://xiry.app/resources/coolshapes

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.