Proof of Concept

Using CSS to display state within an icon

You don't need a separate file for every state of an icon, all you need is simple CSS. Iconic is built exactly for this purpose.

 

Adjust the slider to see the icon change.

 

HTML
<span class="iconic iconic-microphone"><span />
CSS
@font-face {
  font-family: 'Iconic';
  src: url('fonts/Iconic-Large.eot') format('eot');
  src: url('fonts/Iconic-Large.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('fonts/Iconic-Large.woff') format("woff");
  font-weight: 500;
  font-style: normal;/* IE9 Compat Modes */
  /* Modern Browsers */
}
@font-face {
  font-family: 'Iconic';
  src: url('fonts/Iconic-Medium.eot') format('eot');
  src: url('fonts/Iconic-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('fonts/Iconic-Medium.woff') format("woff");
  font-weight: 400;
  font-style: normal;/* IE9 Compat Modes */
  /* Modern Browsers */
}
@font-face {
  font-family: 'Iconic';
  src: url('fonts/Iconic-Small.eot') format('eot');
  src: url('fonts/Iconic-Small.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('fonts/Iconic-Small.woff') format("woff");
  font-weight: 300;
  font-style: normal;/* IE9 Compat Modes */
  /* Modern Browsers */
}

.iconic {
  font-family: 'Iconic';
  display: inline-block;
  background: #efefef;
  text-align: center;
  padding:20px;
  width:128px;
  border-radius: 3px;
  font-size:16px;
  font-weight: 300;
  line-height: .75;
}

.iconic.iconic-microphone:before {
  content: '\1f3a4';
}

.iconic[min-width~="100px"] {
  font-weight: 400;
  font-size:64px;
}

.iconic[min-width~="200px"] {
  font-weight: 500;
  font-size:255px;
}