Custom Shape Libraries (and where to find awesome SVG files to fill them)

A few weeks ago we announced at Atlassian’s Summit that you can now make Custom Shape Libraries in Gliffy which means you’re no longer limited to our default shapes.  Do you want a library of custom arrows? Logos? Network symbols? Just in case you missed our demo, I’m going to show you where to find new shapes and how to add them to Gliffy.

custom-library

If you already have SVG files for the shapes you want, you can skip to the steps on how to add a custom library below

What Kind of Files to Use and Where to Find Them

First of all, while you can use SVG, JPG, GIF, and PNG files in your custom shape libraries, we really recommend SVGs. Why?  SVGs are vector files so they’re scalable.  This means you’ll be able to make your shapes as big (or as small) as you want and they’ll stay sharp and crisp, unlike raster files like JPGs, GIFs and PNGs (which become blurry when you make them bigger).

Some good places to find SVG files for common symbols are:

IcoMoon is currently my favorite resource for SVGs.  Not only does it have a great selection of icon sets to search from, but you can also specify the hex color and size for the icons you want before downloading them.  If for any reason you want to edit your shapes further, you can do this in a vector graphics application like Illustrator, Sketch, or any number of free options like Inkscape  or Janvas 2d.

How to Add A Custom Library

Once you’ve got the SVG files you want, you’re ready to add them to Gliffy by doing the following:

  1. Click the “More Shapes” button at the bottom of the left sidebar.click-more-shapes
  2. Click the “Add Custom Shape Library” button in the dialog that pops up.click-add-custom-library
  3. Give your Shape Library a name and then drag and drop your  SVG files from somewhere on your computer into the specified area in the dialog box (or click the upload link)name-and-add-shapes
  4. Click the “Save Library” button at the bottom of the dialog! That’s it!

 If you have any questions or requests, feel free to send an email to support@gliffy.com or leave a comment here!

Categories: Tips and Tricks

6 Comments

  • James says:

    Looks awesome. When will this come to users of the Confluence plugin?

  • May Woo says:

    It’s already available in the latest version of Confluence! (Just click the “More Shapes” button at the bottom of the sidebar).

  • Jackson says:

    Hi, I’m on Confluence 5.2.3, Gliffy 6.0.1 and Chrome, I have created custom shape library, but I can’t see it after it’s created. In the screenshot #2 above, where you have the 2 options Favorite Libraries and Custom Libraries on the top area, I do not have that. Any particular settings required to have that available?

  • May Woo says:

    Hi Jackson! Not sure why you aren’t seeing the options for Custom Libraries – would it be possible to send a screenshot of what you are seeing to support@gliffy.com? Thanks!

  • Raf Wenger says:

    Is it possible to import colour versions of SVG files?
    When I import a colour SVG it either comes out as a black shape or not at all.
    What am I doing wrong?

  • May Woo says:

    Hi Raf! Yes you should be able to import SVG files in any color. Not sure why you are not seeing your shapes…can you email us at support@gliffy.com and send us the files you are trying to import? Thanks!