Can Vectr be used for professional icon design?

In this post we will review Vectr, a free, web-based vector drawing application. Designers tend to have very strong feelings about their tools. Ask any icon designer or illustrator which vector authoring app they prefer and you will probably get a very passionate reply, not just about the product but also about its makers. This passionate view of one’s tools, however, can occasionally cause us to miss a great opportunity to make our lives easier or to miss a diamond-in-the-rough whose future we have an opportunity to help shape. We believe Vectr offers users one such opportunity.

Iconfinder has published a few vector software reviews over the past few years and we’ve learned a lot about the different software offerings, how to review software in a way that is useful, and some lessons about how not to review software as well. The main thing we have learned is that nobody really cares about our opinions — and that is as it should be. So rather than tell you what we like or don’t like and why you should or shouldn’t give Vectr a try, we decided to learn the software, make some icons, and to write this post more as a roadmap of how Vectr can make their application a top-notch tool for icon designers.

Getting Started

Let’s establish this one key point from the start: We had no intention of evaluating Vectr in terms of how it compares to Adobe Illustrator, Sketch, or Affinity Designer. It is not a fair or even useful comparison. It isn’t those tools and it isn’t intended to compete with those tools — yet. Vectr are trying to create a tool that is accessible nearly anywhere, by anyone, and very easy-to-use. According to Vlad Shvets of Vectr, the basic version of Vectr will always remain free, but their goal is to create a tool that rivals, and even surpasses the bigger players like Adobe Illustrator. But keep in mind, Vectr is a young product and everyone starts somewhere.

For conducting this review, we started out with one basic question: Can Vectr be used to create premium icons that are good enough both technically and aesthetically to sell on Iconfinder? Designers are not interested in a tool that greatly limits them or dictates the designs they can create. The tool must allow one to express one’s creative ideas, not require the designs be dumbed down to fit the tool.

We started with one basic question: Can Vectr be used to create premium icons that are good enough to sell on Iconfinder?

Armed with our evaluation criteria, we downloaded the desktop version Vectr from the Apple Store. We also fired up the web-based version so we could see how well both perform individually and how seamlessly they work together. It was a pleasant surprise to discover that the two versions were nearly indistinguishable and the user experience is essentially identical in both.

Evaluating by Doing

The measure of whether or not Vectr is a useful application as far as icon designers are concerned is not whether or not it is better at drawing icons than Adobe Illustrator, Sketch, Affinity Designer, or any other application, for that matter. The question really comes down to: Can I make and sell icons with it? The answer to that question is a clear “Yes” — with some caveats, which will be covered in the remainder of this article.

For this review we aren’t content to create sample icons that look good on the web page in PNG format. We want to create icons that we can actually upload to Iconfinder, meeting the technical requirements of the upload and review process, and that we can sell. Based on these real-world criteria, we did not encounter any significant problems when creating our icon set.

In our article “6 Easy Steps to Better Icon Design” we outlined a typical approach to designing icons. There are some great icon designers who can create amazing hand-drawn icons that don’t follow a grid but for many designers it is easier to use a grid and start with the simplest shapes possible, i.e., circles, rectangles, and triangles, and add essential details from there.

The Vectr UI

Vectr’s user interface is pretty simple but even still, let’s familiarize ourselves with the interface before going any further with our review.

A. Pages & Layers
B. Size & Positioning
C. Tool bar
D. Workspace
E. Edit Panel
F. Filters

Shortcuts

Vectr has a lot of very useful keyboard shortcuts. To access the Shortcuts Cheat Sheet, type the“?” key. We found that memorizing a few of these, like Command-1 to center the artboard, saved us a lot of time, so we encourage users to spend some time learning the ones you are likely to use often.

Grids & Snapping

You can access the Snapping and Grid features in the Editing Panel section of the UI(right-hand column).

[caption id=”” align=”alignleft” width=”314"]

Type the letter “g” to toggle through the Grid options.[/caption]

Vectr has only a single grid size and does not offer any custom options. However, the development team at Vectr assures me that this is next on the roadmap — a welcome update. Since we are not looking for excuses to not use the application, but rather for a path to bend the tool to our will so we found a work around. We created the basic template using the rectangle shape tool, line segments, and locking the layers for those elements. It was a little more work but the end result is functionally no different from using shapes converted to guides.

[caption id=”attachment_8439" align=”aligncenter” width=”963"]

Type the letter “g” to toggle through the Grid options.[/caption]

The snapping in Vectr is pretty nice. When a point or edge of a shape is aligned to the grid, a highlight appears to show the orientation of the alignment, either horizontal, vertical, or both. When aligning shape elements to the grid, Vectr also highlights the center line when it is aligned. This is a very nice feature. I do wish it “snapped” a little more noticeably but the visual indicators when the cursor, node, or edge is aligned to the grid is very nice. Vlad Shvets, our contact at Vectr has assured us that the snapping is being improved as you read this.

One thing to take note of when zooming in on the Vectr grid is that visually the grid will stay roughly the same size, unlike in Adobe Illustrator where you can zoom in on a pixel-sized grid marker to fill the screen. Whether or not this impacts your work is probably a matter of personal preference.

[caption id=”attachment_8440" align=”alignleft” width=”952"]

Vectr highlights the grid lines when the edge of an element or node aligns to them.[/caption]

The Pen Tool

Vectors, regardless what other decorations they may have, are simply nodes and paths so the Pen Tool is the cornerstone of any vector authoring software. Get the Pen Tool right and you can be forgiven a lot of other omissions. Get the Pen Tool wrong and the other bells-and-whistles are not likely to redeem that app. The good news for Vectr is that the Pen Tool is pretty nice. It works pretty much as you’d expect and has a pretty nice feel to it.

Select the Pen Tool from the tools palette just to the left of your work space. Click anywhere on the artboard and drag to create handles for your curves. To close a path simply click on the starting node. This latter behavior is, surprisingly, not ubiquitous in all vector software but it is the most intuitive behavior.

[caption id=”attachment_8442" align=”aligncenter” width=”794"]

A. Select the Pen Tool from the Tool Bar. B. Click anywhere on the artboard to start drawing a path.[/caption]

You do not need to have the Pen Tool selected to edit a path once you have closed it. To edit the nodes and curves by double-clicking on the shape. You can remove nodes by clicking on the node to select it, then pressing the Delete key. You can tell when a node is selected because the color will change slightly. I think that Vectr should consider making this visual cue more prominent as some users may have a hard time distinguishing the subtle shade change, but I had no problems with it.

[caption id=”attachment_8443" align=”aligncenter” width=”796"]

A. Double-click the object and click anywhere on the path to add a node.[/caption]

Vectr has direct selection of nodes and smart corners. These two features are not directly related but to access them both you need to double-click on an object. Another area of opportunity for Vectr to win over icon designers would be to add the ability to direct select paths so individual path segments can be deleted. Vectr can also win over icon designers by adding the ability to expand paths.

The Pen Tool in Vectr lacks some more advanced customization features like changing the size of the nodes but overall I found the Pen Tool to be very comfortable to use and easy to draw shapes with. I do wish the snapping of nodes and path handles was stronger, however.

The Shape Tools

Vectr has the standard set of Shape Tools: rectangle, circle, rounded-corner rectangle. Additionally, under the ellipses (…) in the Tool Bar there are many more shapes available as icons you can embed directly in your artwork. Vectr has some basic sizing, rotation, and positioning tools available at the very bottom of the left-hand column. These are sufficient for creating icons as far as I could tell. You can access rounded corners on an object by double-clicking the object. You can round individual corners by clicking the node for the corner or for all corners by selecting the entire object. One feature that Vectr should add is the ability to specify rounded corners numerically. Currently you have to guess the amount of rounding, which is insufficient for some designers.

Arrange Elements

One easy change Vectr can make to deliver immediate benefit that will make a significant difference in a designers workflow is to improve the “Send Forward”, “Send Backward” or “Arrange Elements” functionality. There are two ways to accomplish this in Vectr.

• Manually move the layer that contains the element or elements you wish to rearrange using the Layers palette.

• Select the element or elements and use the“Move Forward” or“Move Backward” buttons in the selection palette that appears above any element when it is selected.

[caption id=”attachment_8446" align=”aligncenter” width=”728"]

Use the Move Forward and Move Backward buttons in the selection menu.[/caption]

What would greatly improve the UX for this functionality would be the introduction of:

1. Move to Back and Move to Front commands instead of only moving one layer at a time.
2. The ability to select a target element and Paste in Front or Paste Behind that element in the layer stacking order.
3. The ability to remove sections of paths, thus breaking the path, rather than just removing nodes but leaving the path unbroken.

Pathfinder

Vectr’s Pathfinder capabilities are very useful as-is. There is no doubt that more functions can, and probably will, be added but designers should not find them to be greatly limiting. They also have one very nice feature which is that Vectr shows you a preview of each action when you select two or more elements and hover over each action button.

[caption id=”attachment_8447" align=”aligncenter” width=”1434"]

Exclude intersection[/caption]

[caption id=”attachment_8448" align=”aligncenter” width=”1426"]

Exclude difference[/caption]

[caption id=”attachment_8449" align=”aligncenter” width=”1424"]

Minus Front[/caption]

[caption id=”attachment_8450" align=”aligncenter” width=”1434"]

Merge[/caption]

Aligning Elements

One of the areas where Vectr is most lacking is in aligning elements to one another and to the artboard/page. While the lack of these features is pretty painful, if you are comfortable with the X/Y coordinate system and some fairly simple math, you can still align elements precisely. Or, better yet, if you create your own grid as we did earlier, position it in the center of your page, you can drag elements into place and use Vectr’s snapping and alignment indicators to position elements where you want them.

Fills & Strokes

The Filters Panel in Vectr is really nice and probably the most advanced set of tools in the application. Unlike in many other popular vector editing software products, you can apply multiple backgrounds and multiple strokes to any element. Any of these can be easily turned on or off, changed from solid color to image to radial and linear gradients, and adjust the opacity. You can also drag any filter in the list to change the order in which they appear.

Objects can have multiple strokes with a different width, alignment, and opacity. Additionally, you can set the stroke alignment to center, inside, or outside. You can also add inner and outer shadows as well as set an opacity for the selected object as a whole. Unfortunately there is no option to add rounded end caps, or any other kind of end caps to lines.

Gradients

The gradients in Vectr are pretty simple to use. Select an object then set the Background in the Filters palette to “Linear Gradient”. To adjust the colors in the gradient, click one of the color points in the gradient spectrum line then click the color selector for the gradient in the Filters palette.

Opportunity for Growth

I stated earlier in this post that I did not find Vectr to“greatly” limit my ability to create high-quality, professional icons, and this is true. There are, however, some limitations and things Vectr can do better to make it an even more useful tool for creating premium icons.

Views

When working with a web-based application, obviously pixel preview isn’t important. What you see is literally what you get. It would be useful, however, to have other views such as outline view and view on other devices(e.g., mobile, tablet, etc.).

Bitmap Tracing

Many designers still prefer to work out their concepts by sketching on paper with technical pencil or technical pen then scan the sketches to use as a guide for creating their icons in vector format. Vectr already supports importing images but it would be nice to see this feature expanded with the ability to trace the image to vector.

Multiple Artboards and Exporting

Many icon collections today number in the thousands or even tens-of-thousands of individual icons. A web-based app is perfect for allowing unlimited artboards which can easily be exported to multiple sizes and file formats. We hope that Vectr will add this feature set very soon. Properly done, this feature would definitely get the attention of icon designers.

Constrain Move

I miss not being able to hold the shift key when moving elements to constrain them along a horizontal or vertical axis.

Saving, Syncing, & Revision History

Vectr does not have the traditional“File” menu in either version and there is no Open, Save, or Save As feature- only Import and Export. However, your files are auto-saved and synced between the online and desktop version via Vectr’s servers. I spoke with Vlad Shvets, of Vectr, and we discussed the future Pro version which will include integration with one of the cloud services to provide unlimited storage and version control, which we find very exciting.

Third-party Compatibility & Customization

It would be really nice to see Vectr open its code to third-party customization via a standard API like the Node JS API for developing Node modules. It is impossible for Vectr to address every possible need and a thriving plugin community helps make applications like WordPress, Drupal, and Sketch very attractive to users. The third-party add-on community around these apps are not only selling points to new users but they encourage long-term investment in the tool by a variety of users.

Now, for the bad news

It is not our goal to tell the reader whether Vectr is the solution for them. We have tried to look at the application from the perspective of its ability to create premium icons without severely limiting the icon designer. We decided to write this review as a roadmap for Vectr to providing the tools that icon designers need rather than an opinion piece about the product. However, we would be remiss if we did not point out some of the issues that we encountered.

SVG Elements Lost

We noticed when importing SVG files that some elements from the original would simply disappear. This happened rather consistently. We consider this a major bug. Vectr are aware of this problem and are working to resolve the issue. Since we are also a startup, we understand that if you wait for perfection to share your product, you’ll never share it. We have no doubt this will be resolved very soon.

Grouping Objects

We found the grouping feature to be very buggy. To group objects, you select two or more objects and Right-click(control-click on Mac) and select“Group” from the context menu that appears. However, we had to perform the action several times because Vectr kept unselecting all but the target of the click. We also noticed that if we right-clicked on the top-most element, the bug did not occur. Since Vectr is written in JavaScript, our guess is that the bubbling/propagation of the click event is not being properly stopped.

Scale Strokes When Scaling Objects

From our perspective, scaling line weights when objects are scaled should be the default behavior. It was painful to have to manually resize lines whenever we resized an object.

Scale from Center

Not being able to scale by percentage or scale from center are sorely missed. A workaround for the scaling by numbers is to do the math on the height or width and constrain the dimensions when resizing. The same could be said of the X/Y coordinates but this is very tedious and will not sit well with many users.

Conclusion

One thing that we really love about Vectr is that it is free and can run virtually anywhere, even on Chromebook, which makes the barrier of entry for icon designers very low. Our mission is to help designers make a living doing what they love. We mean “all designers” no matter what their country of origin or economic circumstances. The ability to create premium icons to sell, with a free application instead of costly software licenses or subscriptions is very exciting.

And anyone can learn Vectr quickly and easily. Our reviewer, Scott Lewis, had never used Vectr before undertaking this review. He was able to learn the software very nearly completely in about a day. Admittedly Vectr’s feature set is basic but that is not a bad learning curve. Vectr has only the tools you need and we are confident that the answer to our original question, “Can Vectr be used to create premium icons that are good enough technically and aesthetically to sell on Iconfinder” is a very emphatic “YES” … judge for yourself by downloading this free set of Food icons we created with Vectr especially for this review. You can also click on the image below to analyze the original icon files in Vectr.