macOS Traffic Lights

A set of macOS window control buttons ("traffic lights") in SVG format — close, minimize and maximize, each with default, hover and active states, plus an unfocused icon.

🔧 Installation

npm i macos-traffic-lights

✏️ Usage

Each export is an import of a .svg file, so your project needs a bundler with SVG support (Vite, webpack with asset/resource, Parcel, etc.). With the common setups the imported value is the SVG's URL string.

Named exports:

import { closeHover, unfocused } from 'macos-traffic-lights';

img.src = closeHover;

Or the grouped object (default / named export trafficLights):

import trafficLights from 'macos-traffic-lights';

img.src = trafficLights.close.hover;
img.src = trafficLights.unfocused;

Icons

| Button | Default | Hover | Active | | --- | --- | --- | --- | | Unfocused | unfocused | — | — | | Close | closeDefault | closeHover | closeActive | | Minimize | minimizeDefault | minimizeHover | minimizeActive | | Maximize | maximizeDefault | maximizeHover | maximizeActive |

🤝 Contributing

Contributions are welcome:

• Fork → branch → commit with a feat: / fix: prefix
• Test locally
• Open a pull request