Pictypo Icon Font by Typogama (Envato Elements) You can quickly size them to fit your needs with CSS, and they’re perfectly legible even at 8px. This open-source icon set comes with over 230 practical and technical icons in different formats, from SVG to WOFF. Stop worrying about making your icons work with your text formatting. From frequency icons to beautiful outline toggle icons, you’ll have everything you need! They’re vectors and fully editable in Adobe Illustrator. There’s nothing like minimalism to highlight your product’s quality, and this icon set is an excellent choice for your next project. Trendy Thin Line Icon Font (100 Icons, Envato Elements) With over 480 icons, it’s the whole package! These open-source icons feature actions and items, from arrows and attachments to color palettes. If you’re designing a new interface or you want to showcase your product’s features, check out this great (and free) icon font.
Free Gesture Icon Sets for App DesignersĮva Icons Open Source UI Icon Set (480 Icons). To ensure that your icons always load correctly and have reliable fallbacks for browsers that don’t support you should take a look at the guidelines set out by the Filament Group, Bulletproof Accessible Icon Fonts. These are just things you should consider before you use icon fonts. Both favor SVG.Īs a counter-argument, Pictonic has said that icon fonts are 10% faster than SVG. Ian Feather has discussed his reasons for switching from an icon font to SVG, and CSS Tricks have outlined some considerations when choosing between icon fonts or SVG icons. You load the font file using and using standard CSS rules, you can set the font-size, color, padding, margin, or other properties.Īlthough very popular, icon fonts do also have their pitfalls. Icon fonts are incredibly easy to add to any web design or mobile app project using CSS. On top of that, icon fonts are fully customizable, allowing you to easily adjust the size and edit the color to fit the layout and color scheme of a particular UI design. They can be resized without losing quality, making them perfect for responsive web design, as they can be scaled – with CSS media queries – up for desktop or down for mobile. One of the key perks of using an icon font is its scalability. 
They are the simplest way for a UI designer to add an icon set to a design project. Instead of typical letters and numbers, an icon font contains glyphs, symbols, or pictograms.
0 kommentar(er)
