
Select File > New and add a new file in a tab.ĥ. Press CTRL-C or navigate to Edit > Copy in your menu to copy the icons.Ĥ. To hand select each, just hold down the shift button while clicking on each only those you click on will be selected (as indicated by the blue highlighting). I’m selecting Twitter, Facebook, LinkedIn and Pinterest. Open the original AI file and navigate and zoom to the icons you want to use. We’re going to walk through customizing your icons using Illustrator since that’s a popular application for modifying vector files. If your theme or brand has a primary color, it sometimes looks fantastic to customize your social icons to have the same look and feel as your theme.

#Vector icons social media how to
If you’ve got a site with a ton of social icons or other image files, you should really combine them in a CSS sprite! How to customize your social icons using Adobe Illustrator The result? The spritesheet is positioned so only the single social icon is viewable. By including all the images in a single file, you can utilize CSS to simply point to a specific coordinate in the file and display the given height and width. As browsers make requests for image after image from your server, that’s several round trips, costing quite a bit of time. Sprites are a way of really speeding up your site’s load times. The CSS sprite is a really fantastic inclusion. When you unzip the file, you’ll find that includes the Illustrator file (AI), Encapsulated PostScript (EPS), PNG format, Svg format and even CSS sprites, along with the license information that states they’re free to use and manipulate for personal or commercial use. Pro tip: Here’s a link to Dreamstale’s free collection of 90 social media icons.
#Vector icons social media pdf
Have you ever zoomed in on a PDF file and noticed that it never gets blurry? That’s because the elements (like the fonts) are in a vector format. (Enlarge a JPG image, and you’ll see what I mean.) Vector formats are used quite a bit in EPS, AI and PDF files. When you expand a bitmap, it will eventually distort or blur the image because it’s optimized for a specific resolution. Bitmaps or raster images are a collection of pixels. Vector formats are mathematical calculations that, put together, make up a geometric shape.

These will provide you with the original formats that the icons come in so you can utilize a tool like Adobe Illustrator to open and modify them.

There’s no shortage of commercial free, royalty-free social media icons on the web, thank goodness! You can do a search yourself - just be sure to use the term “vector” along with the icons you’re seeking.
