on

Like many developers, I have loaded all kinds of libraries and dependencies into my sites because of time restrictions, design, or just to save some hassle. This past year I’ve decided to try and break up with many of these libraries and take the reins for myself.

Just about every website has icons and in many cases you would just pull in libraries to handle the iconography. But let’s look at an alternative: coding your own icons. You can take the code I provide as-is, or just borrow from its principals. Either way, there are some easy opportunities to potentially make your website faster and your design more customizable.

I know there is a fair argument to using font-icons, sprites, and normal images. CSS icons are another facet of iconography. I learned a lot when I chose to explore the possibilities! I found that if a site doesn’t have a lot of icons, handling it in CSS can help you save extra server requests and the potential to load in an unnecessary icon font. Every kilobyte we save when loading a web page, we help our user consume our website faster. If you’re only using ten out of the hundred or so icons your loading on the page every time, you might delay your user’s load times and increase abandonment. This becomes especially crucial when the majority of users are visiting via mobile device, and they carefully select where they use their data.

Some benefits of SCSS icons:

    • No extra server request
    • Your icon system is not dependent on a third party system
    • You can tweak any individual icon
    • You’re only using what you need
    • More opportunities for compression
    • Fine tuning your SCSS skills (there’s a lot of tricks pulled in some icons)
    • Totally Custom icons!
      • Since we are using CSS, you can transform your icons to bend, twist, shout, or even “bop-it.”
      • Your icons will be sexier than your client’s competition because your icons can do more than their icons.
      • SCSS icons can have multiple colors!

BEM: Block Element Modifier

Before I dive into the code. I want to preface with some notes about how I like to set up my SCSS. File organization is a whole other endeavor that I’ll leave for another time.

.icon{
	&--search{
		// code here
	}
}

Essentially, the above code creates the class “.icon–search”. I’m using the BEM methodology to organize my SCSS. If you haven’t looked into BEM, please do. The Smith Brothers development team has recently switched to a BEM front end nomenclature that has proved itself beneficial. I wrote a quick outline for internal uses that you can view hereCSS Tricks has a great run down of BEM that I pulled notes from too. (Shout out to @delphic for the recommendation.)

SCSS Icons

I’m going to keep the focus on SCSS for this post. But, if you would like to view the code for the vanilla CSS icons inside the code pen, please hover over the SCSS code pane and click the “view compiled” button (in the bottom right corner).

See the Pen SCSS Icons by David Johnson (@davidjcreative) on CodePen.

Let’s break down what we’re looking at inside the SCSS pane:

  1. Fonts and variables for later use.
  2. Mixins to keep our code clean later on in the file. (And write less code!)
  3. Some general styles to make this example presentable.
  4. The code for the Icons.*
    1. Variables to create the size and color for all icons
    2. A few mixins of common shapes I will be using to create these icons.
    3. General styles all the icons will share.
    4. Then the individual icon styles

*Note: If you want to copy and paste the code for the icons into your own application, you will need to grab all of the mixins or re-write them to your preference.

Here is my thought process for designing a SCSS icon. First, I want my markup to be simple.

 <i class="icon--search"></i>

That looks good to me.

Now I want to use SCSS to turn that markup into a magnifying glass to make a “search” icon. Using Pseudo Selectors, I actually have quite a bit I can control in that markup. For this search icon, I will target the <i> first and make it a circle using a mixin I wrote. Then I will target the “:before” and make it the handle of the magnifying glass. Which looks like this:

&--search {
        @include circle;
	border-width: $icon-size/1.1;
	vertical-align: $icon-size;
	height: $icon-size*3;
	width: $icon-size*3;
	&:after {
		@include bar;
		background: $icon-color;
		top: $icon-size*2.2;
		left: $icon-size*3.2;
		@include transform(rotate(-45deg));
	}
}

You see me calling the variable “$icon-size” a lot. I set the $icon-size equal to $font-size (declared earlier on). So with your own implementation of this, you want to make sure that these Icons are set to your default font size. I made this decision so I can quickly adjust all my icons in unison while maintaining a separation of the two. This creates a consistency with all the icons and you don’t have to worry about adjusting every single icon every time your font size changes. And if you want your icons smaller or bigger than your font, add a little math to the variable like I did:

$icon-size: $font-size/2;

You can see by identifying common shapes and a little math, I can hammer out quite a few icons quickly. But, the idea here is that I am designing the icons with code. There are many more icons than what I provided here. You can take this as a head start or take some of the principals I have here to start your own. Stop the Bleed (a Smith Bros build for UPMC) or even this blog, are perfect examples of websites that only needed a few icons. So writing the icons in code made sense.

Point being, everyone needs icons. You can load in an Icon set via some third-party font system, images, sprites, or coding your own. This methodology I’m providing is the foundation for lightweight iconography. Running lean and clean is our objective, right? Maybe we can trim our server requests, file size, and front-end bloat with custom SCSS icons.

Three take aways for agency use:

1: It’s in the details. Your agency can create icons specifically for your client. Font awesome didn’t design their icons for your client. They designed them for everyone’s clients. Take care of your client to a level of detail few others have gone to.

2: Innovation. As a frontend developer I like to think “these icons are where the gloves come off.” You have the opportunity to design with code and do what it takes to create something. This code is duplicatable, and able to be refactored time and time again. There is no losing the .ai file on the internal server or “Sorry, the icons are on Craig’s laptop.” It’s in the damn commit history at the very least.

3: Speed. The goal of icons is to communicate small amounts of information more quickly than words. If you are loading extra stuff that your web page doesn’t need, you are delaying site from being displayed and your users from consuming your content. SCSS Icons load in with the rest of your website styles, so it’s an asset that has to be served regardless. Let icons communicate quickly like they should. Ditch the icon library, and create your icons with code.

David Johnson
David Johnson
Front End Web Developer

David Johnson joins the SBA development team as a Front End Web Developer. At his last agency, Marc USA, he touched many facets of interactive advertising for blue chip clients like Pennsylvania Lottery, Rite Aid, True Value and Gold Eagle. He takes pride in finding solutions to unique problems while maintaining a high standard for user experience and accessibility. David is an enthusiastic alum of Pittsburgh Technical Institute where he studied Multimedia Technologies.