Custom 404 Page in React with SVG and Back Button

If your users land on a page that doesn't exist, it's a great opportunity to guide them back in style. This 404 error page includes a lightweight SVG illustration and a bold "Back to Home" button to make the experience better for users.

404 page preview

404 Error Page Component Code

How to use

1. Match button color with the SVG

Try to use a button color that looks good with your SVG. In this example, we used bg-yellow-500, but you can change it to fit your website’s colors.

2. Use SVG as an image (optional)

If you're using Vite or Next.js, you can also add the SVG as a regular image.

---

By following or copy-pasting the code above, you can quickly add an attractive and user-friendly 404 error page to your React or Next.js applications. Feel free to enhance it further with animations, custom illustrations, or dynamic route suggestions based on your app’s structure.