Free vector icons pro#
Pro tip: You’ll notice I have a small drop-shadow on my logo, so I’m even going to add that effect. Ungroup each of the icons, select their backgrounds, and apply the color to each icon using the eyedropper until all of them are the same color as the logo. You’ll see that the background now matches the logo color selected! 9. To do this, use the eyedropper tool and with the background selected, hover over your logo and select the color you’d like to match the background to. Select the logo color for the background match. Click on the background to see the color to edit from the original color.Ĩ. Right-click after selecting the icon and click Ungroup.ħ. Pro tip: If you click on any of the icons independently, you’ll notice that the logo and the icon background are grouped together. I just set it somewhere convenient so that I can remove it later. Copy your logo into Illustrator to match the colors. I love the alignment tools for this, which can be used to align and distribute them equally.Ħ. You might need to shift them around to make them easier to manage. Paste the icons you selected by pressing CTRL-V or Edit > Paste in your menu. 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.
Free vector icons 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.
Free vector icons license#
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.
Free vector icons 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.
0 kommentar(er)
