FolderLab

English | Espanol

A browser-based tool to customize macOS folder icons. Static project with separate HTML, CSS, and JS files, ready to use.

Features

• Customize folder color and inner paper color when enabled
• Includes two icon libraries:
  • Symbols: Tabler Icons, hundreds of general-purpose icons, searchable by category
  • Brands: 350+ Simple Icons, covering development, design, social, media, cloud and AI, productivity, shopping and life, browsers, and system
• One-click "Use brand color": selecting a brand applies its official color (for example GitHub black, Figma red, Claude orange-brown), with an option to return to a custom color
• Supports eyedropper, color palettes, and presets
• Exports PNG / ICO, ready for macOS "Get Info -> drag onto icon" and Windows (ICO)

Usage

Download this repository and open index.html in your browser. No build or dependencies required.

If you want a local preview server, use either of these:

# Python
python -m http.server 8099

# Node
npx serve .

Then open http://localhost:8099.

Compatibility

Recommended on recent versions of Chrome / Safari / Edge. Mobile is also supported.

Technologies

• Plain HTML / CSS / JavaScript, separate files
• Local fonts in fonts/ (no Google Fonts)
• iro.js — color picker
• Tabler Icons — symbols library (MIT)
• Simple Icons — brand library (CC0-1.0), icon data in brands-data.js (lazy loaded)

Main files

• index.html — UI
• styles.css — styles
• script.js — logic
• symbols-data.js — symbols
• brands-data.js — brands (lazy load)
• fonts/ — local fonts and fonts.css

License

MIT

Brand names and logos belong to their respective owners; FolderLab is a visualization tool and does not imply affiliation or endorsement.