Description:
React Old Icons is a React icon component library that provides over 2,300 classic icons from vintage operating systems and software.
It currently includes icons from Windows 95, 98, XP, Vista, and 7, along with icons from classic games and retro applications .
Each icon as an individual, tree-shakeable React component with full TypeScript support.
Features
- 💾 Massive Icon Collection: Access a library of over 2,300 icons from classic operating systems like Windows 95, XP, and 7, as well as vintage games and software.
- 🔍 Interactive Browser: Explore the entire icon set with an interactive browser that includes search, filtering by category, and one-click code copying.
- 🔧 Customizable Props: Adjust the size, apply custom CSS classes, and add inline styles to make the icons fit your design perfectly.
- ♿ Accessibility Ready: Use the
altprop to provide descriptive text for each icon, ensuring your application is accessible to screen readers.
Preview
Use Cases
- Build a personal portfolio with a Windows 98 theme to stand out.
- Develop a web-based application that mimics the user interface of classic 90s software.
- Create an educational website that explores the history of user interface design.
- Design a nostalgic dashboard for a home automation project.
- Develop a retro-style game interface with authentic icons from the golden age of PC gaming.
How to Use It
1. Iinstall the package into your project using npm.
npm install react-old-icons2. Import any icon as a React component. The icons are named logically based on their origin. For example, to use the calculator icon from Windows 7 and the classic Notepad icon, you would import them directly.
import { Windows7Calculator, Windows95Notepad } from 'react-old-icons';
function MyRetroApp() {
return (
<div>
<p>My Favorite Classic Apps</p>
<Windows7Calculator />
<Windows95Notepad />
</div>
);
}3. You can customize the appearance of each icon through props. The library accepts size, className, style, and alt for every component. The size prop can be a number for pixels or a string for other CSS units.
import { SoftwarePhotoshop, WindowsRecycleBin } from 'react-old-icons';
function IconShowcase() {
return (
<div>
{/* Set size in pixels */}
<SoftwarePhotoshop size={48} alt="Photoshop Icon" />
{/* Use rem units and custom styles */}
<WindowsRecycleBin
size="3rem"
style={{ filter: 'grayscale(1)' }}
alt="Recycle Bin Icon"
/>
</div>
);
}Related Resources
- 98.css: A CSS file that makes your semantic HTML look like Windows 98. It is a useful companion for building a complete retro interface.
- RetroUI: A React component library for websites that supports TailwindCSS and TypeScript, allowing you to add a pixelated, retro touch to your projects.
- React95: A library of React components that follow the design of Windows 95, perfect for creating applications with a nostalgic feel.
FAQs
Q: Can I use these icons in a commercial project?
A: No, this library is intended for non-commercial, educational, and historical preservation purposes only. The icons are the property of their respective companies.
Q: How do I find a specific icon in the library?
A: The project includes an interactive icon browser on its website. You can search, filter by category, and preview icons to find the one you need.
Q: Are the icons SVG files?
A: The icons are provided as React components that render optimized WebP images, ensuring fast performance while maintaining historical accuracy.
Q: Does this library support server-side rendering?
A: Yes. The components are standard React elements and work in any environment that supports React, including SSR frameworks like Next.js.
