> For the complete documentation index, see [llms.txt](https://devresources.gitbook.io/devresources/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devresources.gitbook.io/devresources/contents/fonts-icons-and-colors.md). # 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 |