Proof of Concept

 

Resize your browser window to see the icon change.

Iconic's web font comes in three weights respresenting its three sizes. Switching all your icons is as simple as switching fonts.

HTML
<div class="iconic-mic"></div>
CSS
/* Include the three font weights */
@font-face {
  font-family: 'Iconic';
  src: url('fonts/Iconic-Small.eot') format('eot');
  src: url('fonts/Iconic-Small.eot?#iefix') format('embedded-opentype'),
   url('fonts/Iconic-Small.woff') format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Iconic';
  src: url('fonts/Iconic-Medium.eot') format('eot');
  src: url('fonts/Iconic-Medium.eot?#iefix') format('embedded-opentype'),
   url('fonts/Iconic-Medium.woff') format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Iconic';
  src: url('fonts/Iconic-Large.eot') format('eot');
  src: url('fonts/Iconic-Large.eot?#iefix') format('embedded-opentype'),
   url('fonts/Iconic-Large.woff') format("woff");
  font-weight: 600;
  font-style: normal;
}

/* Default: Small */
.iconic-mic { width: 25px; height: 25px; }
.iconic-mic:before {
  font-family: 'Iconic';
  content: '\1f3a4';
  font-weight: 300;
  font-size: 20px;
  line-height: 25px;
}

/* Medium */
@media only screen and (min-width: 481px) {
  .iconic-mic { width: 100px; height: 100px; }
  .iconic-mic:before {
    font-weight: normal;
    font-size: 80px;
    line-height: 100px;
  }
}

/* Large */
@media only screen and (min-width: 768px) {
  .iconic-mic { width: 300px; height: 300px; }
  .iconic-mic:before {
    font-weight: 600;
    font-size: 256px;
    line-height: 300px;
  }
}