Free 3D Primitive Icon Set

While designing a 3D user interface, I came across the desire for some icons representing 3D primitives. I wanted a cube icon, torus icon, sphere icon, etc. After some searching I came up empty handed. So I made some! Here, you can have them.

Preview

You can just download one of these images if you want a super quick solution.

I made them with thick outlines:

And thin outlines:

And no outlines:

Usage

If you want different colors, the -webkit-filter property can change colors with hue-rotate. It's currently Chrome only, but the other browsers should catch up soon. Check out the HTML5 filters demo for more information.

Here's the Sass (you are using Sass, right?) to style the icons. Simply change $size for different sizes.

.primitive-icon {
    $size:25px;

    display:inline-block;
    width:$size;
    height:$size;
    background:transparent url(primitive-icons-40x40-thin-lined.png) 0 50% no-repeat;
    -webkit-filter:saturate(0.0);
    background-size:cover;
    transition:all ease 0.3s;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    &:hover {
        cursor:pointer;
        -webkit-filter:saturate(1.0);
    }

    &.torus { background-position:( -2 * $size ) 50%; }
    &.teapot { background-position:( -3 * $size ) 50%; }
    &.sphere { background-position:( -4 * $size ) 50%; }
    &.plane { background-position:( -5 * $size ) 50%; }
    &.cylinder { background-position:( -6 * $size ) 50%; }
    &.cone { background-position:( -7 * $size ) 50%; }
    &.cube { background-position:( -8 * $size ) 50%; }

}

Suggested markup:

<div class="primitive-icon torus">torus</div>  

Source Files

Finally, I've included the full source files, including:

  • Source 3d max file (requires Mental Ray to render)

  • Full individual icons rendered in glorious 512x512 pngs:

  • Source Photoshop file, containing the three types and a saturation layer to change color:

Download the primitive-icons.zip archive if you need more control or larger icons.

That's it!

If you use these in your project, consider following me on Twitter or buying me a coffee :).

comments powered by Disqus