Published on <a href="https://blog.prototypr.io/how-to-make-a-dot-5ac40102a160?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Jory Raphael 
<h4>A non-definitive guide on how to make a strokes-intact dot for outline style icons.</h4>
Sometimes you need to make a dot in Adobe Illustrator. And sometimes it takes you so long to figure out how to make said dot that you begin to contemplate the benefits of giving up design entirely and living as a hermit in the woods. To save others from this path of existential angst, here’s a quick tutorial.
<h3>Intact Strokes vs. Outlined Strokes</h3>
If you follow me on <a href="http://twitter.com/sensibleworld">social media</a>, or live within a thirty mile radius of me, then you’ve heard about <a href="http://symbolicons.com">Symbolicons Pro</a> — my new icon family with three unique styles: solid, line, and color. The solid style is available now, and I’m hard at work on the line style. Unlike standard solid glyph icons which rely on filled shapes and negative space, line (or “hollow”) icons are characterized by their use of strokes.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-1sehRwEKuCM-N2hkkVRSA.png">An upload icon in Symbolicons Pro Solid and its counterpart in Symbolicons Pro Line.
There are two ways strokes in line icons are typically dealt with. They are either left intact, or outlined. Outlining results in more vector points, but ensures that the final icons remains exactly as you designed them.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kwstJjk1sX3T9v6IXDPBQg.png">
That said, one of my goals with the line style in Symbolicons Pro is to make it as flexible as possible, which is the reason I’m including strokes-intact versions of all icons. End-users will have the ability to scale the icons to whatever size they’d like and still have control over how thick (or thin) the lines appear.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XE8kd-FenLeOuweol3fiCQ.png">
<h4>Which brings us to the problem…</h4>
The icons in Symbolicons Pro Line are all being built on a 24px grid, so space is limited. One design element that recurs throughout these icons is the use of single dots. Little circles to convey meaning.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-I1e0Drmwr9TLJ8XpwISaQ.png">
With the original stroke weight of 2pts, each dot occupies two points on the pixel grid.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*T5rSwq-QMkYo4H0C1ZiCxA.png">
If using outlined strokes, this is no problem. The dot can simply be created using a circle shape. But if the strokes are to remain intact, it becomes a little trickier.
It seems logical that a stroke could be applied to a single dot, or node. A node with a 2pt stroke would appear as a 2pt dot.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8GzmpyopfdWof1U3Rgf8Cg.png">
But in reality, at least in Adobe Illustrator, this doesn’t work. Single, unconnected, nodes are treated as strays and ignored. The reason for this is simple: vector shapes and lines in Illustrator all have a width and height, but a single dot has neither.
<h4>The Workaround</h4>
Since Illustrator ignores single nodes, the workaround solution is to treat the dot itself as a very, very short line. To achieve the desired result, simply create a stroked line of any length and move one of the nodes so that it overlaps the other. If you have ‘Snap to Grid’ turned on in Adobe Illustrator, this is quite easy. You can also accomplish this using the transform palette (simply give the line a width of 0 and a height of 0. The two nodes will now occupy the same X/Y coordinates and essentially be stacked on top of one another. The end result is the elusive dot. Important note: you’ll need to have the “cap” setting in the stroke palette set to rounded.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mwBMm_GjW-CYZZkfK13N3A.png">A hyper zoomed-in view of two nodes. By visually overlapping the end-points, you get the desired result.
But there’s a minor catch, especially if you plan on using your strokes-intact icons in <a href="https://www.sketchapp.com">Sketch</a>. Just as Illustrator ignores single nodes, Sketch seems to ignore single, overlapping nodes. To account for this, simply adjust the length of your line by a very small amount (example: width of 0 and height of 0.01). The end result may not be a perfect circle, but the difference is so small as to be almost imperceptible.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Z-UgZuq4N7PRQGAuSmz23A.png">
And there you have it! Just a minor work-around I’ve discovered to simplify my process and that allows my icons to work in both Illustrator AND Sketch. Hopefully it can help others who may stumble across the same issue.
<a href="https://symbolicons.com">You can get Symbolicons Pro here.</a>
If you have any icon-related questions, let me know by responding to this story. I’ll do my best to answer them. And if you have a better solution to the above problem, I’m all ears!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5ac40102a160" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-to-make-a-dot-5ac40102a160">How to Make a Dot</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Make a Dot

A non-definitive guide on how to make a strokes-intact dot for outline style icons.

Top Stories