--- title: "Copy Paste Icons for Website - SVG, PNG, and JSX" product: "Streamline Icons, Illustrations and Elements" url: /copy-paste-icons-for-website canonical_url: "https://design.streamlinehq.com/copy-paste-icons-for-website" summary: "Copy any icon as SVG, PNG, or JSX and paste it straight into your website. 109,582 free icons, no sign up required, plus free Figma and VS Code plugins." --- # Copy and paste free icons into your website > Copy any icon as SVG, PNG, or JSX and paste it straight into your website. 109,582 free icons, no sign up required, plus free Figma and VS Code plugins. - **URL**: https://design.streamlinehq.com/copy-paste-icons-for-website --- * The only icon system: massive, consistent sets * Drawn in-house by one team of 8 icon designers * Copy as SVG, PNG, or JSX, or drag from your Mac [Access Pro Icons](https://www.streamlinehq.com/premium), [Start With Free Icons](https://www.streamlinehq.com/free) ## Copy and paste an icon in three steps ### Search for the icon Real-time search shows results as you type. Every family shares the same categories, so one search works across all of them. ### Pick SVG, PNG, or JSX Copy pastes as SVG or PNG. JSX and SVG code are both ready to copy and paste, with currentColor support built in. ### Paste it into your page Drop the SVG into your HTML, or the JSX into a React component. No build step and no icon font to load. ## SVG, PNG, or JSX? All three are free to copy on Streamline. Where you are pasting decides which one you want. | | SVG | PNG | JSX | | ------------------------------- | --- | --- | --- | | Paste as markup into HTML | Yes | No | No | | Paste as markup into React | No | No | Yes | | Insert as an image file | Yes | Yes | No | | Recolor with CSS or props | Yes | No | Yes | | Scales to any size without loss | Yes | No | Yes | | Email newsletters | No | Yes | No | | Word, Canva, and slides | No | Yes | No | | Free on Streamline | Yes | Yes | Yes | ## Icon sets built for interfaces Core, Flex, and Sharp. Free and pro counts per style, and every set copies as SVG, PNG, or JSX. ### Core Core is the Helvetica of icons, stripped to its essential form with generous spacing. 998 free icons across 8 styles. * **Core Line**: [998 free icons](https://www.streamlinehq.com/icons/core-line-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-line) * **Core Solid**: [998 free icons](https://www.streamlinehq.com/icons/core-solid-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-solid) * **Core Flat**: [998 free icons](https://www.streamlinehq.com/icons/core-flat-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-flat) * **Core Gradient**: [998 free icons](https://www.streamlinehq.com/icons/core-gradient-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-gradient) * **Core Duo**: [998 free icons](https://www.streamlinehq.com/icons/core-duo-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-duo-color) * **Core Neon**: [998 free icons](https://www.streamlinehq.com/icons/core-neon-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-neon) * **Core Pop**: [998 free icons](https://www.streamlinehq.com/icons/core-pop-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-pop-style) * **Core Remix**: [998 free icons](https://www.streamlinehq.com/icons/core-remix-free), [5,615 pro icons](https://www.streamlinehq.com/icons/core-remix) ### Flex Flex is a fluid icon family inspired by nature's curves, more organic than Core but subtler than Plump. 499 free icons across 8 styles. * **Flex Line**: [499 free icons](https://www.streamlinehq.com/icons/flex-line-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-line) * **Flex Solid**: [499 free icons](https://www.streamlinehq.com/icons/flex-solid-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-solid-style) * **Flex Flat**: [499 free icons](https://www.streamlinehq.com/icons/flex-flat-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-flat-style) * **Flex Gradient**: [499 free icons](https://www.streamlinehq.com/icons/flex-gradient-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-gradient) * **Flex Duo**: [499 free icons](https://www.streamlinehq.com/icons/flex-duo-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-duo) * **Flex Neon**: [499 free icons](https://www.streamlinehq.com/icons/flex-neon-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-neon) * **Flex Pop**: [499 free icons](https://www.streamlinehq.com/icons/flex-pop-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-pop) * **Flex Remix**: [499 free icons](https://www.streamlinehq.com/icons/flex-remix-free), [5,615 pro icons](https://www.streamlinehq.com/icons/flex-remix) ### Sharp Sharp combines pure geometry and bold structure for a brutalist, high-tech feel. 500 free icons across 8 styles. * **Sharp Line**: [500 free icons](https://www.streamlinehq.com/icons/sharp-line-free), [5,616 pro icons](https://www.streamlinehq.com/icons/sharp-line-style) * **Sharp Solid**: [500 free icons](https://www.streamlinehq.com/icons/sharp-solid-free), [5,616 pro icons](https://www.streamlinehq.com/icons/sharp-solid-style) * **Sharp Flat**: [500 free icons](https://www.streamlinehq.com/icons/sharp-flat-free), [5,616 pro icons](https://www.streamlinehq.com/icons/sharp-flat-style) * **Sharp Gradient**: [500 free icons](https://www.streamlinehq.com/icons/sharp-gradient-free), [5,616 pro icons](https://www.streamlinehq.com/icons/sharp-gradient) * **Sharp Duo**: [500 free icons](https://www.streamlinehq.com/icons/sharp-duo-free), [5,616 pro icons](https://www.streamlinehq.com/icons/sharp-duo-style) * **Sharp Neon**: [500 free icons](https://www.streamlinehq.com/icons/sharp-neon-free), [5,616 pro icons](https://www.streamlinehq.com/icons/sharp-neon-style) * **Sharp Pop**: [500 free icons](https://www.streamlinehq.com/icons/sharp-pop-free), [5,616 pro icons](https://www.streamlinehq.com/icons/sharp-pop-style) * **Sharp Remix**: [500 free icons](https://www.streamlinehq.com/icons/sharp-remix-free), [5,616 pro icons](https://www.streamlinehq.com/icons/sharp-remix) ## What copying an icon actually looks like ### Set the size and stroke before you copy Export settings sit next to the copy button: icon size, stroke width, and an outline stroke toggle for when the receiving tool cannot keep a live stroke. Fully editable in Figma or any vector tool afterwards. ### Search, then copy or drag Native plugins for Figma and Lucid, plus a Mac app for drag and drop. Copy pastes as SVG or PNG. Multi-select downloads in bulk. Real-time search shows results as you type. ### Dev-friendly modes Responsive sizing, currentColor support, JSX and SVG code to copy and paste, and drag-and-drop assets in VS Code through the Mac app. ## Or start from the encyclopedia Ultimate is our largest and oldest family, covering pretty much every use case you can imagine. ### Ultimate 1,000 free icons per set across 5 styles. Encyclopedic coverage, from common to rare icons. A neutral style that fits most use cases. * **Ultimate Light**: [1,000 free icons](https://www.streamlinehq.com/icons/ultimate-light-free), [17,683 pro icons](https://www.streamlinehq.com/icons/streamline-light) * **Ultimate Regular**: [1,000 free icons](https://www.streamlinehq.com/icons/ultimate-regular-free), [16,751 pro icons](https://www.streamlinehq.com/icons/streamline-regular) * **Ultimate Bold**: [1,000 free icons](https://www.streamlinehq.com/icons/ultimate-bold-free), [18,541 pro icons](https://www.streamlinehq.com/icons/streamline-bold) * **Ultimate Colors**: [1,000 free icons](https://www.streamlinehq.com/icons/ultimate-colors-free), [10,456 pro icons](https://www.streamlinehq.com/icons/streamline-colors) * **Ultimate Duotone**: [1,000 free icons](https://www.streamlinehq.com/icons/ultimate-duotone-free), [10,935 pro icons](https://www.streamlinehq.com/icons/streamline-duotone) ## 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 more icons to copy 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) ## Software that doesn't get in the way Many icon marketplaces slow you down before you even start. We don't show third-party ads. Almost all our features are available to use, for free: change size and color, export in multiple formats, and use the free plugins for Figma, Lucid, and VS Code. You can drag and drop icons from your Mac's menu bar directly in a file. Copying is the shortest version of that idea. Open an icon, choose a format, paste it where it belongs. There is no download folder to manage, no zip to unpack, and no icon font to wire up first. ## What free covers when you copy an icon No sign up required. Free downloads ask for attribution, a credit link wherever the icons appear, which Pro and Lifetime plans remove. Yes, you can use them for all personal and commercial projects. That covers 109,582 free icons across 34 families. Pro adds 333,032 icons across 58 sets and drops the credit line, which matters most on a commercial site where the footer is already full. ## Frequently asked questions Quick answers about copying and pasting icons into a website. ### How do I copy and paste an icon into my website? Open any icon on Streamline, choose SVG, and copy it. Paste the markup directly into your HTML where you want the icon to appear. No download, no upload, and no asset pipeline. For a React project, copy the JSX version instead and paste it into your component. Both formats are available on every free and pro icon. See [SVG icons](/svg-icons.md) for more on the format itself. ### Can I paste an SVG icon directly into HTML? Yes. An SVG icon is plain markup, so it belongs in your HTML the same way a paragraph does. Pasting it inline rather than linking to a file means you can style it with CSS, change its color with the color property, and animate it. The trade-off is that the markup sits in your page source, so for a large icon set you may still prefer to reference files. ### How do I copy an icon as JSX for React? Pick JSX as the format and copy. The difference from raw SVG is that hyphenated attributes become camelCase, so `stroke-width` becomes `strokeWidth` and `class` becomes `className`. Pasting raw SVG into a React component without that conversion throws warnings. Streamline also supports currentColor, so the icon inherits the text color of whatever wraps it. ### Are these icons free to copy and paste? Yes. 109,582 icons across 34 families are free, with no sign up required, and you can use them for personal and commercial projects. Free downloads ask for attribution, a credit link wherever the icons appear. [Pro and Lifetime](https://www.streamlinehq.com/pricing) plans remove that requirement and unlock 333,032 pro icons. ### Can I change the icon color after pasting it? Yes. Once an SVG is inline in your page, its color is a CSS property like any other. Streamline icons ship with currentColor support, so an icon inside a link takes the link color automatically. You can also set your brand colors inside Streamline and apply them to a whole set in one click before you copy. The same applies on [website icon sets](/icons-for-websites.md). ### What if I need a PNG instead? Copy as PNG for places that cannot take markup: email newsletters, Word documents, Canva, and most slide tools. Each icon, free or premium, is optimized for large-size exports, ensuring visual clarity and sharpness. So, you can avoid pixelation or blur. [PNG icons](/png-icons.md) covers when to reach for it.