Overview
Achromatic Icons fall under the qualifier type and their style is complimentary to the Mono Color Icons. What distinguishes these icons is that the palette is applied to the background instead of the icon. Achromatic Icons are white with NO stroke information applied to them.
Achromatic Icons should have generous space around them to give them an appearance of "floating" in a field of color. This ensures that these icons are read as anchors on a page directing the end user to a specific section or region within the UI.
/*--- CSS Circle ---*/
/*--- circle without stroke ---*/
.circle {
/* width and height are depend on the icon size */
width: 96px;
height: 96px;
/* put image at center */
/* please replace the image in url() */
background-image: url(../img/qual_xxx_48.png);
background-repeat: no-repeat;
background-position: center;
/* color of circle */
background: #12B6CF;
/* make div circle */
border-radius: 50%;
}
/*--- circle with strokes ---*/
.circle-strokes {
/* become base of .circle::after */
position: relative;
/* width and height are depend on the icon size */
width: 96px;
height: 96px;
/* put image at center */
/* please replace the image in url() */
background-image: url(../img/qual_xxx_48.png);
background-repeat: no-repeat;
background-position: center;
/* *
* background-size should be used when we need the image covering the whole circle
* for example, using user's image for avatar
*/
/* background-size: cover; */
/* color of circle */
background-color: #12B6CF;
/* make div circle */
border-radius: 50%;
/* *
* keep the inner cirlce to have same area as .circle::after
* the size depends on the circle size
* and it is the same as left/top of .circle::after
*/
margin: 5px;
/* *
* white color between inner circle and outermost stroke
* border width is the same as margin value
*/
border: 5px solid #FFFFFF;
}
.circle-strokes::after {
content: '';
display: block;
/* border-box make width/height including border */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* the size of outer circle. Please check value in the spec */
width: 106px;
height: 106px;
/* *
* align center with .circle
* the values of left/top depend on circle size
* please check the spec
*/
position: absolute;
left: -5px;
top: -5px;
/* make div circle */
border-radius: 50%;
/* The outermost stroke is as same as background color */
border: 1px solid #12B6CF;
}
Color Palette
The Palette is applied to the background while the icon is stripped of all color. The Color Palette is derived of a subset of colors from the Mono Color and Full Palette Color Swatches.
The Gray and Neutral colors referenced in the Icon palette are also available for use with this palette.
Size Constraints
The Achromatic Icons are primarily referenced at the 32x32 & 48x48, and larger sizes. The background container should be 200% of the icon size (e.g., 32x32 pixel icon on a 64x64px background)
Icon Samples
