← Back to blog
VSC Editorial·

The FamFamFam Silk Icons: A Pixel-Perfect Legacy

How Mark James created 1,000 free icons that shaped the visual language of the early web and continue to influence design today.

Key Takeaways

  • Mark James created over 1,000 pixel-perfect 16x16 icons released for free in 2006
  • The "Silk" name came from their smooth, polished appearance
  • Licensed under Creative Commons Attribution, requiring only a link back
  • Still actively used in countless applications, CMSs, and admin interfaces today
  • Influenced an entire generation of icon designers and established conventions
  • The set proved that generosity and quality create lasting impact

## The Origin Story

In 2006, the web looked different. Rounded corners required images. Gradients were sliced into repeating backgrounds. And icons? Icons were precious commodities, often locked behind expensive licenses or created painstakingly by hand for each project.

Into this landscape stepped Mark James, a web developer from Birmingham, UK. Working under the playful moniker "FamFamFam" (a name that remains charmingly unexplained), James had a vision: create a comprehensive, beautiful icon set and give it away for free.

The Silk Set

The result was the Silk icon set: 1,000 16x16 pixel icons rendered with remarkable attention to detail. Each icon featured:

  • Consistent lighting from the top-left
  • Subtle gradients that gave depth despite the tiny canvas
  • 2-pixel rounded corners on rectangular elements
  • A cohesive color palette that made mixing icons feel natural

The name "Silk" wasn't arbitrary—these icons had a smooth, polished quality that stood out against the clunky clip-art aesthetic common at the time.

Why It Mattered

1. The License Was Revolutionary

James released the Silk icons under Creative Commons Attribution 2.5. This meant: - Free for personal use - Free for commercial use - Modification allowed - Only requirement: credit with a link back

In an era when icon licenses often ran hundreds of dollars, this was genuinely radical.

2. The Coverage Was Comprehensive

The set included icons for: - File types (documents, images, archives) - Actions (add, delete, edit, save) - Navigation (arrows, pagination, breadcrumbs) - Status indicators (error, warning, success, info) - Objects (folders, databases, servers, users) - And hundreds more

A developer could build an entire application interface using only Silk icons.

3. The Quality Set a Standard

James's pixel-perfect craftsmanship established conventions still followed today: - The "green checkmark" for success - The "red X" for errors - The "yellow triangle" for warnings - The "blue circle i" for information

These visual metaphors, refined in the Silk set, became a universal language.

The Living Legacy

Nearly two decades later, FamFamFam Silk icons appear in:

  • WordPress plugins and themes
  • phpMyAdmin and database tools
  • Bug trackers and project management software
  • Learning materials and documentation
  • Legacy enterprise applications (some still running!)

The icons have been converted to SVG, compiled into icon fonts, and integrated into modern frameworks. They're a archaeological layer of web history visible in production systems worldwide.

The Lesson

Mark James built something that outlasted trends, frameworks, and entire technology generations. The secret wasn't just quality—it was generosity combined with quality.

By giving away his work freely, James ensured it would spread. By making it excellent, he ensured it would stay.

Today, as we debate the sustainability of open source and the economics of free resources, the Silk icons stand as proof: build something great, give it away, and it will live forever.


The Silk icon set is still available at famfamfam.com/lab/icons/silk/

Code Examples

Using FamFamFam icons in your project

<!-- Classic usage -->
<img src="/icons/silk/accept.png" alt="Accept" width="16" height="16" />
<img src="/icons/silk/cancel.png" alt="Cancel" width="16" height="16" />
<img src="/icons/silk/folder.png" alt="Folder" width="16" height="16" />

<!-- With CSS sprites (old school but still works) -->
<span class="icon icon-accept"></span>

<!-- Modern: Convert to SVG or use icon fonts -->
<link rel="stylesheet" href="famfamfam-silk.css" />
<i class="silk-icon silk-accept"></i>

Enjoyed this article? Share it with a fellow developer.