---
title: "Discussion on \"How to Use SVG Icons in React, Next.js, and Tailwind CSS\" | Hashnode"
description: "Discussion on \"How to Use SVG Icons in React, Next.js, and Tailwind CSS\". There are exactly three sensible ways to get an SVG icon into a React codebase: paste it inline as a component, import the file through a build transform like SVGR, or reference it from a sprite. Most"
url: "https://hashnode.com/posts/how-to-use-svg-icons-in-react-next-js-and-tailwind-css/6a6e799fa3483c317f70c2c7"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How to Use SVG Icons in React, Next.js, and Tailwind CSS](https://svgiconscom.hashnode.dev/how-to-use-svg-icons-in-react-next-js-and-tailwind-css?utm_source=hashnode&utm_medium=feed)

There are exactly three sensible ways to get an SVG icon into a React codebase: paste it inline as a component, import the file through a build transform like SVGR, or reference it from a sprite. Most

Aug 1 · 4 min read · svgiconscom.hashnode.dev  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#nextjs](https://hashnode.com/tag/nextjs)
-   [#tailwindcss](https://hashnode.com/tag/tailwindcss)
-   [#svg](https://hashnode.com/tag/svg)

## Written by

[Marc EMILE](https://hashnode.com/@marcemile)

@marcemile · paris, France

  
[View profile](https://hashnode.com/@marcemile)

Building icon tools and sharing practical SVG and frontend guides.

Founder of Axialis Software. I build icon tools and share practical guides about SVG, icon systems, frontend workflows, and developer tooling.

## Responses

Markdown supported · ⌘↵ to post

No responses yet.