# Fonts, Icons, and Colors

### Fonts

> Websites that offer free fonts as well as font-based tools

| Website                                                                      | Description                                                                                          |
| ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [Google Fonts](https://fonts.google.com/)                                    | Library of around 1000 free licensed font families                                                   |
| [DaFont](https://www.dafont.com/)                                            | Archive of freely downloadable fonts                                                                 |
| [Use & Modify](https://usemodify.com/)                                       | Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces             |
| [1001 Free Fonts](https://www.1001freefonts.com/)                            | I think the name speaks for itself :smirk:                                                           |
| [Font Squirrel](https://www.fontsquirrel.com/)                               | Font Squirrel scours the internet for high quality, legitimately free fonts                          |
| [Font Fabric](https://www.fontfabric.com/free-fonts/)                        | A digital type foundry crafting retail fonts and custom typography for various brands                |
| [Tiff](https://tiff.herokuapp.com/)                                          | A type diff tool that visually contrasts the differences between two fonts                           |
| [TypeKit Practice](https://practice.typekit.com/)                            | Learn about typography practices                                                                     |
| [Fontjoy](https://fontjoy.com/)                                              | Generate font pairing in one click                                                                   |
| [Golden Ratio](https://grtcalculator.com/)                                   | Golden Ratio Typography Calculator                                                                   |
| [FontSpark](https://fontspark.app/)                                          | Discover Better Fonts                                                                                |
| [FontGet](https://www.fontget.com/)                                          | Has a variety of fonts available to download and sorted neatly with tags                             |
| [FontPair](https://fontpair.co/)                                             | Helps you pair Google Fonts together                                                                 |
| [Font Space](https://www.fontspace.com/)                                     | A designer-centered free font website that has quick customizable previews                           |
| [Abstract Fonts](http://www.abstractfonts.com/)                              | Fonts free for personal and commercial use                                                           |
| [Free Typography](https://freetypography.com/)                               | A list of high quality fonts                                                                         |
| [Leon Sans](https://github.com/cmiscm/leonsans/)                             | A geometric sans-serif typeface made with code                                                       |
| [Lexend](https://www.lexend.com/)                                            | A variable font empirically shown to significantly improve reading-proficiency                       |
| [Fonts for Apple Platforms](https://developer.apple.com/fonts/)              | Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps |
| [SFWin](https://github.com/blaisck/sfwin/)                                   | San Francisco Fonts for Windows 10 and non-Apple Platform                                            |
| [Font Flipper](https://fontflipper.com/)                                     | Preview 800+ Google Fonts on top of your own designs, without having to download the fonts           |
| [Fonts Arena](https://fontsarena.com/)                                       | Free curated fonts                                                                                   |
| [Befonts](https://befonts.com/)                                              | High quality fonts for free                                                                          |
| [Arabic fonts](https://arabicfonts.net/)                                     | Arabic fonts for free                                                                                |
| [FontDrop](https://fontdrop.info)                                            | Simple and easy way to view the contents of font files                                               |
| [Open Foundry](https://open-foundry.com)                                     | FREE platform for curated open-source typefaces                                                      |
| [Glyphter](https://glyphter.com)                                             | Upload your own SVGS and turn them into font files. Useful if you want a smaller library loaded      |
| [Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/fonts) | A Hassle-Free Way to Self-Host Google Fonts                                                          |
| [Rough Font Awesome](https://djamshed.github.io/rough-awesome-font/dist/)    | When RoughJS meets Font Awesome                                                                      |
| [FFonts](https://ffonts.net)                                                 | Stylish fonts for free                                                                               |
| [Malayalam Fonts](https://smc.org.in/fonts/)                                 | Malayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC)                |
| [Dev Fonts](https://devfonts.gafi.dev/)                                      | Find and use the coding fonts for free                                                               |

### Colors

> Websites and resources that help with choices related to colors

| Website                                                            | Description                                                                                                                                                    |
| ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Color Brewer 2](https://colorbrewer2.org/)                        | The original color palette generator, also supporting color blindness. Probably the scientifically best option. Also probably not the prettiest.               |
| [Colormind.io](http://colormind.io)                                | Color palette generator                                                                                                                                        |
| [ColorCurves.app](https://colorcurves.app)                         | Color palette generator that uses curves to generate color palettes                                                                                            |
| [ColorGradient](https://colorgradient.dev/)                        | A free tool to create simple and complex CSS Gradients visually                                                                                                |
| [Coolors](https://coolors.co)                                      | Create the perfect palette or get inspired by thousands of beautiful color schemes                                                                             |
| [HTML Color Codes](https://htmlcolorcodes.com/)                    | Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names                                              |
| [Colors & Fonts](https://www.colorsandfonts.com/)                  | A curated library of colors, fonts and resources                                                                                                               |
| [Palette List](https://www.palettelist.com/)                       | Pick 2 colors you like and the tool generates thousands of palettes for you.                                                                                   |
| [Paletter](https://www.paletter.app)                               | Create a color palette from a single color                                                                                                                     |
| [Google Material Color Tool](https://material.io/resources/color/) | Official Google Material Color Palette Tool                                                                                                                    |
| [Material Palette](https://www.materialpalette.com/)               | Free to pick palettes, icons and colors for Material Design                                                                                                    |
| [ColorSpace](https://mycolor.space/)                               | Generate nice color palettes from one color                                                                                                                    |
| [FlatUIColors](https://flatuicolors.com)                           | Beautiful set of color palettes in various flavors                                                                                                             |
| [Adobe Color](https://color.adobe.com/create)                      | Create color palettes, extract gradients from images, etc.                                                                                                     |
| [Colorsinspo](https://colorsinspo.com/)                            | All-in-one resource for finding everything about colors                                                                                                        |
| [ColorsWall](https://colorswall.com/)                              | Place to store your color palettes and generate palette in one click                                                                                           |
| [Happyhues](https://www.happyhues.co/)                             | Happy Hues is a color palette inspiration site that acts as a real-world example as to how the colors could be used in your design projects by Mackenzie Child |
| [Adobe Trends](https://color.adobe.com/trends)                     | Discover current color trends in different industries from the creative communities on Behance and Adobe Stock                                                 |
| [Color Hunt](https://colorhunt.co/)                                | A free and open platform for color inspiration with thousands of trendy hand-picked color palettes                                                             |
| [Gradient Hunt](https://gradienthunt.com/)                         | A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients                                                         |
| [Web Gradients](https://webgradients.com/)                         | A free website to find good CSS gradients                                                                                                                      |
| [ColorBox](https://www.colorbox.io)                                | A free website to produce color set                                                                                                                            |
| [CSS gradient](https://cssgradient.io/)                            | A free website to make custom gradient and some examples of gradient                                                                                           |
| [gradienta](https://gradienta.io/)                                 | A pure css and jpg gradients                                                                                                                                   |
| [UI Gradients](https://uigradients.com/)                           | UI gradients color generator                                                                                                                                   |
| [Palette Generator](https://palettegenerator.colorion.co/)         | Generate new color palette with every spacebar press                                                                                                           |
| [Material Palettes](https://material.colorion.co/)                 | 1000+ Material Design palettes                                                                                                                                 |
| [Grabient](https://www.grabient.com/)                              | Gradient Selector                                                                                                                                              |
| [ShadeSwash](https://shadeswash.netlify.app/)                      | Quickly generate shades of any color                                                                                                                           |
| [BrandColors](http://brandcolors.net/)                             | The biggest collection of official brand color codes                                                                                                           |
| [BRAND PALETTES](https://brandpalettes.com/)                       | Logo Color Codes and Palettes                                                                                                                                  |
| [Material Design Palette Generator](http://mcg.mbitson.com)        | Generate theme and color palette Material Design-like                                                                                                          |
| [Colorate](https://colorate.azurewebsites.net/)                    | Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work.                               |
| [0to255](https://www.0to255.com/)                                  | A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more.                                     |
| [Color Blender](https://meyerweb.com/eric/tools/color-blend)       | A tool that shows the midpoint colors between two colors                                                                                                       |
| [Gradient Buttons](https://gradientbuttons.colorion.co/)           | Ready to use copy/paste gradient buttons                                                                                                                       |
| [Khroma](http://khroma.co/)                                        | Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.                                            |
| [whocanuse](https://whocanuse.com)                                 | A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.                                      |
| [Colorable](https://colorable.jxnblk.com/)                         | Color combination contrast tester                                                                                                                              |
| [Color Hex Picker](https://colorhexpicker.com)                     | Tool to get hex code along with name of the color.                                                                                                             |
| [Saruwakakun](https://saruwakakun.com/en/color-ideas)              | The stunning color scheme for website & App Designs with previews                                                                                              |
| [Paletton](https://paletton.com/)                                  | Paletton.com is a designer color tool designed for creating color combinations that work together well.                                                        |
| [Colorzilla](https://www.colorzilla.com/)                          | A powerful online Photoshop-like CSS gradient editor                                                                                                           |
| [Image Color Picker](https://image-color.com/)                     | Image color picker and palette generator                                                                                                                       |
| [CombineCOLORS](https://combinecolors.com/)                        | Color mixing tool                                                                                                                                              |
| [Color Lovers](https://www.colourlovers.com/palettes)              | It will show the color schemes which are popular in the outside world.                                                                                         |
| [HTML CSS Color](https://www.htmlcsscolor.com/)                    | Free online Color (USA) or Colour (British) tools: information, gradient generator, color wheels etc.                                                          |
| [HEX Color Codes](https://hexcolorcodes.org/)                      | It gets HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names.                                         |
| [CoolHue 2.0](https://webkul.github.io/coolhue/)                   | A free tool that shows different gradient examples in CSS and PNG format                                                                                       |
| [Colors.lol](https://colors.lol/)                                  | Interesting color palettes generated by a Twitter bot, there are hex codes and descriptive names for each color.                                               |
| [colors.dopely](https://colors.dopely.top/)                        | Super-fast and simple color palette generator, palettes can be saved and shared in seconds.                                                                    |
| [UIColor Picker](https://uicolorpicker.com/)                       | A collection of UI Colors with hex codes available to be copied in just one click.                                                                             |
| [Color Hex](https://www.color-hex.com)                             | Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK) and generates a simple css code for the selected color.                 |
| [FarbVelo](https://farbvelo.elastiq.ch/)                           | A random color palette generator                                                                                                                               |
| [Veranda Color](https://verandacolor.com)                          | Browse color palettes made by other designers, generate and submit your own                                                                                    |
| [Duo](https://duo.alexpate.uk/)                                    | Duo is a collection of colour combinations that I’ve curated from personal projects or that I’ve come across on the web.                                       |
| [Lospec Palette List](https://lospec.com/palette-list)             | The Lospec Palette List is a database of palettes for pixel art.                                                                                               |

### Icons

> Resources for Icons including png, svg and more

| Website                                                                  | Description                                                                                                                                                 |
| ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [UXWing](https://uxwing.com/)                                            | Well Optimized, Free icons for commercial use                                                                                                               |
| [Shapedfonts Iconclub](https://shapedfonts.com/iconclub/)                | 8000+ free icons                                                                                                                                            |
| [Feather Icons](https://feathericons.com/)                               | Beautiful, customizable open source icons                                                                                                                   |
| [Tabler Icons](https://tablericons.com/)                                 | 470+ highly customizable open source SVG icons                                                                                                              |
| [Xicons](https://www.xicons.org/#/)                                      | SVG Vue/React components integrated from fluentui-system-icons, ionicons, etc. (Vue3, Vue2, React, SVG).                                                    |
| [Iconoir](https://iconoir.com/)                                          | Free library of 900+ open source icons                                                                                                                      |
| [Simple Icons](https://simpleicons.org/)                                 | 1307 Free SVG icons for popular brands                                                                                                                      |
| [Linear Icons](https://linearicons.com/free)                             | 1000+ Ultra crisp vector icons                                                                                                                              |
| [Icons8](https://icons8.com/)                                            | Free icons, photos, vectors and tools                                                                                                                       |
| [Flat Icon](https://www.flaticon.com/)                                   | The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats                                                                                |
| [The Noun Project](https://thenounproject.com/)                          | Over 2 Million curated icons, created by a global community                                                                                                 |
| [Iconscout](https://iconscout.com/)                                      | Free Download Icons illustrations stock photos at one place                                                                                                 |
| [IconSear.ch](https://iconsear.ch/search.html)                           | Search engine with over 50,000 SVG icons indexed                                                                                                            |
| [Nucleo App](https://nucleoapp.com/)                                     | Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid)                     |
| [Icon-icons.com](https://icon-icons.com/)                                | Free Icons PNG, ICO, ICNS and Vector file SVG                                                                                                               |
| [Bootstrap Icons](https://icons.getbootstrap.com/)                       | Free Icons built for Bootstrap but they'll work in any project                                                                                              |
| [Remix Icon](https://remixicon.com/)                                     | Simply Delightful Icon System                                                                                                                               |
| [Iconmonstr](https://iconmonstr.com/)                                    | Discover 4496+ free icons in 313 collections                                                                                                                |
| [Vivid.js](https://webkul.github.io/vivid/)                              | Ready to use Free and Open Source SVG Icons Pack JavaScript Library.                                                                                        |
| [Iconfinder](https://www.iconfinder.com/)                                | Free and premium vector icons in SVG, PNG, CSH and AI format                                                                                                |
| [Lordicon](https://lordicon.com/icons#free)                              | 50 free animated interactive icons                                                                                                                          |
| [UseAnimations](https://useanimations.com/)                              | Free Animated Icons in SVG and Json Format(for lottie)                                                                                                      |
| [css.gg](https://css.gg/)                                                | 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API                                                          |
| [IconBros](https://www.iconbros.com)                                     | 7843+ free icons grouped in 182 collections                                                                                                                 |
| [Material Design Icons](https://materialdesignicons.com/)                | An icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project. |
| [Heroicons](https://heroicons.dev/)                                      | Free, open source icons from the creators of Tailwind CSS.                                                                                                  |
| [Zondicons](https://www.zondicons.com/icons.html)                        | A set of free premium SVG icons for you to use on your digital products.                                                                                    |
| [Endless Icons](http://endlessicons.com/)                                | A website offering a number of free icons. Icons are tagged and also compressed into kits.                                                                  |
| [Icomoon](https://icomoon.io/app/)                                       | Browse 5500+ Free Icons. Add any set you wish to easily browse and search its icons.                                                                        |
| [Eva Icons](https://akveo.github.io/eva-icons/#/)                        | Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.                                                    |
| [Cryptoicons](http://cryptoicons.co/)                                    | A set of 430 crypto and fiat currency icons. Completely free.                                                                                               |
| [Ikonate](https://ikonate.com/)                                          | Fully customizable & accessible vector icons                                                                                                                |
| [appicon](https://appicon.co/)                                           | Quickly generate app icons in different sizes for your IOS, macOS and Android projects                                                                      |
| [LineIcons](https://lineicons.com)                                       | 2000+ Essential Line Icons for Designers and Developers                                                                                                     |
| [Evericons](https://www.figma.com/resources/assets/evericons-for-figma/) | Evericons is a big pack of over 460 free icons designed by Aleksey Popov.                                                                                   |
| [SVG Repo](https://www.svgrepo.com/)                                     | Download free SVG Vectors for commercial use.                                                                                                               |
| [Convertio](https://convertio.co/png-svg/)                               | Convert PNG files to SVG online & free. (One of the services provided by it.)                                                                               |
| [CSS ICON](https://cssicon.space/)                                       | Icon set made with pure css code, no dependencies, "grab and go" icons                                                                                      |
| [Unified icons](https://iconify.design/)                                 | Thousands of icons, one unified framework. One library, over 40,000 vector icons.                                                                           |
| [System UIcons](https://systemuicons.com/)                               | 220+ icons in a growing collection.                                                                                                                         |
| [IconPark](https://github.com/bytedance/IconPark)                        | Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons                                                                    |
| [Radix Icons](https://icons.modulz.app/)                                 | A crisp set of 15×15 icons designed by the Modulz team. All icons available as individual react component,SVG and more.                                     |
| [EOS Icons](https://icons.eosdesignsystem.com/)                          | A pixel-perfect, open source iconic font available as ligature and SVG.                                                                                     |
| [Ionicons](https://ionicons.com)                                         | Beautifully crafted open source icons for use in web, iOS, Android, and desktop apps.                                                                       |
| [Phosphor Icons](https://phosphoricons.com)                              | Phosphor is a flexible icon family for interfaces, diagrams, presentations                                                                                  |
| [Teeny Icons](https://teenyicons.com/)                                   | TeenyIcons is a set icons in SVG format easy to use in html                                                                                                 |
| [Lucide](https://lucide.netlify.app/)                                    | Lucide is an open-source icon library, a fork of Feather Icons.                                                                                             |
| [Icones](https://icones.js.org/)                                         | Icon Explorer with Instant searching, powered by Iconify.                                                                                                   |
| [Shitty Icons](https://shittyicons.com/)                                 | Collection of Free icons.                                                                                                                                   |
| [Iconspedia](https://www.iconspedia.com/)                                | Iconspedia is a website that contains a large collection of high quality free icons.                                                                        |
| [iconhub](https://iconhub.io/)                                           | Just practical stunning icons for everyone                                                                                                                  |

### Logos

> Resources for Logos

| Website                                                          | Description                                        |
| ---------------------------------------------------------------- | -------------------------------------------------- |
| [Instant Logo Search](http://instantlogosearch.com/)             | Thousands of free brands logos ( SVG - PNG )       |
| [LogoSear.ch](https://logosear.ch/search.html)                   | Search engine with over 200,000 SVG logos indexed  |
| [SVGPorn](https://svgporn.com)                                   | 1000+ high-quality SVG logos                       |
| [Payment System Logos](https://github.com/mpay24/payment-logos/) | Logos for payment systems available in png and svg |
| [Browser Logos](https://github.com/alrra/browser-logos/)         | High resolution web browser logos                  |
| [VectorLogoZone](https://www.vectorlogo.zone/)                   | Consistently formatted SVG logos                   |
| [World Vector Logo](https://worldvectorlogo.com/)                | Download vector logos of brands you love           |
| [Logo Maker](https://logomakr.com/)                              | Create custom logos                                |
| [Free Logo Maker](https://www.namecheap.com/logo-maker/)         | Fast, All-in-One Logo Generator                    |

### Favicons

> Resources for Favicons

| Website                                                     | Description                                                                                                                |
| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| [Favicon.io](https://favicon.io/)                           | Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats                           |
| [Favicomatic](https://favicomatic.com/)                     | Generate favicons of all the sizes and formats as well as the HTML code needed to support every possible browser or device |
| [Favicon Generator](http://tools.dynamicdrive.com/favicon/) | Generate favicon ico files for your website                                                                                |
| [RealFaviconGenerator](https://realfavicongenerator.net/)   | Generate icons for all platforms (Windows, iOS, Android)                                                                   |
| [FontIcon](https://gauger.io/fonticon/)                     | Generate favicons and images from Font Awesome icons                                                                       |

### Icon Fonts

> Resources for Icon Fonts

| Website                                                                                           | Description                                                                                                                                  |
| ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Font Awesome](https://fontawesome.com/)                                                          | The web's most popular icon set and toolkit                                                                                                  |
| [Line Awesome](https://icons8.com/line-awesome)                                                   | Swap in replacement of Font Awesome with modern line icons                                                                                   |
| [Material Icons](https://material.io/resources/icons/)                                            | Material design icon library                                                                                                                 |
| [IonIcons](http://ionicons.com/)                                                                  | Beautifully crafted open source icons from Ionic team                                                                                        |
| [Zurb Foundation Icons](https://zurb.com/playground/foundation-icon-fonts-3)                      | Customizable Foundation icons                                                                                                                |
| [Fontisto Icons](https://fontisto.com/)                                                           | Fontisto the iconic font and css toolkit · 616+ free icons                                                                                   |
| [Boxicons](https://boxicons.com/)                                                                 | Boxicons is a free collection of carefully crafted open source icons                                                                         |
| [Icofont](https://icofont.com/)                                                                   | 2100+ free icons to spice up your creative designs                                                                                           |
| [Material Palette](https://www.materialpalette.com/icons)                                         | Free to pick palettes, icons and colors for Material Design]                                                                                 |
| [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/index.html) | Material design icon font                                                                                                                    |
| [Vscode Codicons](https://microsoft.github.io/vscode-codicons/dist/codicon.html)                  | The icon font from Visual Studio Code                                                                                                        |
| [Devicon](https://konpa.github.io/devicon/)                                                       | Devicon is a set of icons representing programming languages, designing & development tools                                                  |
| [PaymentFont](https://github.com/AlexanderPoellmann/PaymentFont)                                  | A sleek web font for payment operators and methods. Featuring 116 icons                                                                      |
| [Weather Icons](https://erikflowers.github.io/weather-icons/)                                     | Weather Icons is the only icon font with 222 weather themed icons                                                                            |
| [Stroke 7](https://themes-pixeden.com/font-demos/7-stroke/index.html)                             | 202 thin stroke icons inspired by iOS 7                                                                                                      |
| [Jam Icons](https://jam-icons.com/)                                                               | 890+ handcrafted icons to make your web app awesome                                                                                          |
| [Fontello](http://fontello.com/)                                                                  | 200+ web icons where you can customize the names or codes of icons.                                                                          |
| [Linea](https://linea.io/)                                                                        | Linea: Featuring 750+ Free Icons                                                                                                             |
| [Unicons](https://iconscout.com/unicons)                                                          | A set of 1100+ Free line style icons available as web font, SVG icons, and as components for JS frameworks like React, Vue and React Native. |
| [Mobirise Icons](https://mobiriseicons.com/)                                                      | A free, open source set of 150 elegant, pixel-perfect linear icons, available as web icon font and SVG icons.                                |
| [Hero Icons](https://heroicons.dev/)                                                              | Free Open Source Svg Icon Library                                                                                                            |
