WEBFONT ICON CODE
WEBFONT ICON DOWNLOAD

The Crafty Font Collection (24 Fonts, Envato Elements) It improves upon Font Awesome’s offer and lets you add all sorts of icons (from accessibility and building to arrows and brand icons) to your website (via CDN), Figma prototypes, and much more.

WEBFONT ICON CODE

Wirebet is perfect for wireframes!Ĭryptofonts (1,250+ Free Icons, Icon Font)Īdd modern line icons to your materials in one line of code with Line Awesome. You’ll get various technical icons, from symbols for portfolio pages to arrows and device icons. Wirebet fonts are a great choice if you want to streamline your workflow and integrate engaging icons into your materials without booting up your design suite. Wirebet Wireframe Fonts (Envato Elements) You’ll find everything from AWS and other brand logos to business and lifestyle icons in the FA gallery. They offer over 1,600 free icons, all of which have been meticulously designed to showcase friendliness and ease of use. The design is very intuitive, and you can easily customize them in Adobe Illustrator.įont Awesome is a massive and very popular icon set. You’ll get 60 minimalist wireframe icons, from symbols for login pages to grid, timeline, and typography icons. Make your next project more dynamic and engaging with Icoframe – beautiful and modern wireframe icons. Icoframe Wireframe Icon Set (60 Icons, Envato Elements)

WEBFONT ICON DOWNLOAD

Depending on your needs, you can download outline, filled, and/or sharp icon renders as SVG and web font files. You will get numerous app icons (notifications, arrows, food, and more), as well as icons featuring renowned brands’ logos (e.g., Pinterest). Ionicons is a well-rounded icon pack for the Ionic framework. Ionicons Icon Pack for Ionic Framework (1,100+ Icons) The lines are bold, so they look good on large displays, too. From weather icons to office symbols, Pictypo offers everything you need. The rounded style adds a dash of friendliness, and you’ll get plenty to work with. Pictypo offers fun and engaging icons rendered with dingbat fonts. 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.

Webfont icon