--- title: "Gradient Icons - Depth and Impact at Larger Sizes" product: "Streamline Icons, Illustrations and Elements" url: /gradient-icons canonical_url: "https://design.streamlinehq.com/gradient-icons" summary: "Gradient icons add depth and dimensionality, best where impact matters and especially on dark backgrounds. Free and pro gradient sets in four families." --- # Download gradient icons in four families, free to start > Gradient icons add depth and dimensionality, best where impact matters and especially on dark backgrounds. Free and pro gradient sets in four families. - **URL**: https://design.streamlinehq.com/gradient-icons --- * The only icon system: massive, consistent sets * Drawn in-house by one team of 8 icon designers * Recolor to your brand in one click with SVG [Access Pro Icons](https://www.streamlinehq.com/premium), [Start With Free Icons](https://www.streamlinehq.com/free) ## Download an icon in three steps ### Find the icon you need Real-time search shows results as you type. Every family shares the same categories, so one search covers all of them. ### Pick the style and set the colour Save your brand colours in Streamline and apply them to a whole set in one click, previewing before you export. ### Export as SVG or PNG SVG stays editable in code and design tools. PNG bakes it in, ready for slides, documents, and email. ## Families with a gradient style Core, Flex, Sharp and Plump. Free and pro counts per style. ### Gradient Solid with gradients added for depth and dimensionality. Best where impact and immersion matter, especially on dark backgrounds. * **Core Gradient**: [998 free icons](https://www.streamlinehq.com/icons/core-gradient-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-gradient) * **Flex Gradient**: [499 free icons](https://www.streamlinehq.com/icons/flex-gradient-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-gradient) * **Sharp Gradient**: [500 free icons](https://www.streamlinehq.com/icons/sharp-gradient-free), [5,616 pro icons](https://www.streamlinehq.com/icons/sharp-gradient) * **Plump Gradient**: [500 free icons](https://www.streamlinehq.com/icons/plump-gradient-free), [5,369 pro icons](https://www.streamlinehq.com/icons/plump-gradient-style) ## Where these sets get used ### Where it is the wrong choice Core Line contributes no personality by design, so a brand that needs the icons to carry identity will not get it here. At 64px and above the stripped-back construction starts to read as sparse rather than clean. ### Dashboards that should not have a point of view Core is the Helvetica of icons: SaaS dashboards, admin panels, developer tools and settings screens, where the icons are infrastructure and the content is the thing. It works inside any design system without competing with it. ### Platforms other people build on If third parties ship inside your product, an opinionated icon set becomes their problem as well as yours. Core stays neutral enough that a partner brand can sit next to it without a clash. ## Works in your tools * [Mac App](https://home.streamlinehq.com/plugins/download): Drag and drop icons directly into any app * [Figma](https://www.figma.com/community/plugin/852192486284901337): Browse and insert icons without leaving Figma * [Framer](https://www.framer.com/marketplace/plugins/core-icons-by-streamline/): Use icons natively in Framer projects * [Webflow](https://webflow.com/apps/detail/streamline-icons): Add icons directly to Webflow sites * [VS Code](https://marketplace.visualstudio.com/items?itemName=streamline.streamline-icons): Insert icons as SVG or JSX in editors * [Lucid](https://lucid.co/marketplace/01f05f6d/streamline-icons-illustrations-emojis-and-elements): Add icons to your Lucidchart diagrams * [Miro](https://miro.com/marketplace/streamline/): Drop icons into your Miro boards * [Adobe Express](https://adobesparkpost.app.link/TR9Mb7TXFLb?addOnId=w165n33k3): Use icons in Adobe Express projects ## Get every style with Pro Free sets cover thousands of icons. Pro unlocks the full library across every family. ### Free: $0 * 109,582 icons * Mandatory attribution * All plugins, web app, MCP and API (limited) * Adjust size, color and format [Get started](https://www.streamlinehq.com/free) ### Pro subscription: $19 per month * 333,032 pro icons on top * Full resolution PNG exports * 58 pro sets in 11 families * All plugins, web app, MCP and API * Pay monthly or yearly [Get Pro](https://www.streamlinehq.com/pricing) ### One-time purchase: Lifetime * Buy once, own forever * Future assets included * All source files as a ZIP * All plugins, web app, MCP and API * No renewal fees [Get Lifetime](https://www.streamlinehq.com/lifetime) ## What a gradient icon is for Solid with gradients added for depth and dimensionality. Best where impact and immersion matter, especially on dark backgrounds, which is why gradient sets turn up on landing pages and hero sections rather than in toolbars. The gradient is carrying the weight, so it needs room. Below roughly 40 pixels the ramp compresses into what looks like a slightly muddy flat colour, and the icon would have been better as a solid. ## The honest limit Gradient styles date faster than geometry. A shape drawn on a grid stays current for a decade; a colour ramp belongs to the years it was popular in, and a product covered in them will read as of its moment sooner than one that is not. That is a fair trade on a campaign page and a poor one in product chrome. Use gradient where the page is meant to feel current, and a flatter style where the interface has to last. ## What free covers No sign up required. Free downloads ask for attribution, a credit link wherever the icons appear, which Pro and Lifetime plans remove. That is 109,582 free icons across 34 families, with 333,032 more on Pro. Yes, you can use them for all personal and commercial projects. Each icon, free or premium, is optimized for large-size exports, ensuring visual clarity and sharpness. So, you can avoid pixelation or blur. ## Frequently asked questions Quick answers about this style. ### What is a gradient icon? An icon whose fill is a colour ramp rather than a flat tone, which gives it depth and makes it read as dimensional rather than graphic. Streamline draws gradient styles on the same grids as the rest of the family, so the shapes match their flat siblings exactly. ### What size should gradient icons be? Roughly 40 pixels and up. Below that the ramp has too few pixels to read as a gradient and the icon just looks like an uneven flat colour. For small interface sizes a Solid or Line style from the same family is the better pick. ### Do gradient icons work on dark backgrounds? That is where they are strongest. The style is built for impact and immersion, especially on dark backgrounds, and a gradient gives a dark UI somewhere for the eye to land without needing a second accent colour. ### Are these icons free to download? Yes. 109,582 icons across 34 families are free, with no sign up required. Free downloads ask for attribution, a credit link wherever the icons appear, which [Pro and Lifetime](https://www.streamlinehq.com/pricing) plans remove. See [SVG icons](/svg-icons.md) for the format itself.