Skip to content

nafasebra/awesome-webdesign-tools

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

60 Commits
Β 
Β 
Β 
Β 

Repository files navigation

🎊 awesome-webdesign-tools

Unleash Your Web Dev Potential: Awesome Tools You'll πŸ’Ž there is an awesome list of tools for Web developers such as websites, libraries and etc. enjoy ❀️✌️


Contributions

  1. Fork this repository.
  2. Submit a Pull Request (PR).
  3. Report any issues you find by opening a new issue.

Table of contents

Icons

  • Heroicons (dev version) - Heroicons is a collection of MIT open source interface icons for web and app development.
  • Heroicons - Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS (like previos website)
  • Iconfinder - Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format.
  • Tabler Icons - 800+ Highly customizable & free SVG icons
  • Icon8 - Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers β†’ consistent quality ⚑️
  • CSS icons - App for css.gg icons with custom selection for all pure CSS icons
  • Icons JS - A list of awesome icons
  • 3DIcons - 1440+ beautifully crafted open-source 3D icons. You can use completely free and without attribution for personal or commercial project
  • Iconer - list of many icons
  • Radix icons - A crisp set of 15Γ—15 icons designed by the WorkOS team.
  • Icon sccut - Access 8.2 Million+ free or premium vector icons, illustrations, 3D illustrations, and Lottie animations for any design.
  • SVG Icons and backgroud - SVG Backgrounds hosts a collection of customizable SVG-based repeating patterns and backgrounds for websites and blogs.
  • Make face 3d icons - Peeps Avatar Builder by UI8.net
  • A list of colorful images - Blush makes it easy to add free illustrations to your designs. Play with fully customizable graphics made by artists across the globe.
  • Sapiens UI8.net - Sapiens Character Builder by UI8.net
  • Noun project - Noun Project has the most diverse collection of free icons and stock photos. Download SVG and PNG. Over 5 million art-quality icons and free photos.
  • Icon monstr - Free simple icons for your next project
  • Feather - Simply beautiful open source icons
  • Visual pharm - 400k free icons available for free download in SVG and PNG. One-click download.
  • Digital nomad icons - Digital nomad themed set of 25 high resolution flat icons, for free.
  • Core UI - Premium designed free icon set with marks in SVG, JavaScript, and Webfont formats. CoreUI Icons are beautifully crafted symbols for common actions and items.
  • Zwicon - The zwicon icon library was made to support our work @zwoelf. Now it is available to download.
  • ICONSVG - Simple tool to find, customize and generate common SVG icons for your project
  • Tilda - Download free icons for landing pages. More than 400 vector icons, collected in 27 sets for business.
  • Flaticons - Download Free Icons and Stickers for your projects. Images made by and for designers in PNG, SVG, EPS, PSD and CSS formats
  • Streamline icons - 177,289 Streamline icons in line, regular, bold, colors, freehand, cyber, and more styles. Download the largest icons sets of the world in one place.
  • Ikonate - Customise, adjust and download free vector icons.
  • Stick PNG - StickPNG is a vibrant community of creative people sharing transparent PNG images which you can download for free and use in your personal non-commercial or educational projects.
  • Free PNG IMG - Download free PNG images, pictures and cliparts with transparent background in best resolution and high quality(HQ) and icons. Available for Mobile, Dual Monitors, HD, Fullscreen and Widescreen.
  • PNG Tree - Pngtree provides free download of png, png images, backgrounds and vector. Millions of high quality free png images, PSD, AI and EPS Files are available.
  • Fav PNG - Free Transparent PNG Images. Our database contains more than 16 million free transparent PNG files.
  • SVG Artista - SVG Artista is a free tool that helps you easily create amazing SVG drawing animations by animating stroke and fill properties of your SVG graphics.
  • Shape so - 36000+ Icons & Illustrations to SVG, Lottie, React. Shape lets you customize the style, colors and border of static & animated icons and illustrations. You can export to React, SVG and Lottie code.
  • Imgur - Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with funny jokes, trending memes, entertaining gifs, inspiring stories, viral videos, and so much more.
  • svgrepo - 500.000+ Open-licensed SVG Vector and Icons
  • svgicons - Ready to use SVG icons for the web
  • Fave Icon Generator - creating a favicon should be a simple process. No other favicon generator or favicon creator can make a well designed favicon from text.
  • Boxicon - High Quality Web Icons Simple Open Source icons carefully crafted for designers & developers.
  • Fontawesome - Font Awesome is the internet's icon library and toolkit used by millions of designers, developers, and content creators.

Colors

  • CSS gradient - As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
  • Gradient magic - A Free Gallery of Fantastic and Unique CSS Gradients.
  • Parametric color - A color palette composer inspired by audio parametric equalizers. Create beautiful color palettes with a scientific precision.
  • grabient - Beautiful and simple UI for generating web gradients.
  • Palettte App - The definitive palette editing and remapping tool
  • paletton - In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer. Use the color wheel to create great color palettes.
  • color hunt - Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
  • Easing gradient - Supercharge your gradients with non-linear color mix and custom color spaces.
  • Flat UI Colors - 280 handpicked colors ready for COPY & PASTE
  • A tool for colors - List of all tools: Palette Generator, Gradient Generator, Color Name Finder
  • Color palette - Get color palette inspiration from nature - updated daily
  • Bada55 - Looking for a BADA55 hex color words for your css code? Come here now!
  • Shape divider - Custom Shape Dividers.
  • Color slurp - Pick, edit, and copy colors with the best color picker for Mac and iOS!
  • WebGradients - WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website.
  • InclusiveColors accessible UI palette creator - Create accessible Tailwind-style UI color palettes, with WCAG/APCA contrast checks, live previews on a mockup and CSS/Figma/Adobe export.

Designs

  • List of UI components for your projects - Library of free and customizable UI elements made with CSS or Tailwind. It's all open-source, and it's all free. Try it out to save you many hours spent on building & customizing UI components for your next project.
  • Tailwind UI Kit - Tailwind UI KIT – 250 components and templates for React, VueJS and Angular.
  • Component gallery - A list of components
  • Design system gallery - A list of design systems
  • Checklist design
  • Toools design - Discover highly useful Design Resources & Tools
  • Godly.website - The best web design inspiration site
  • Dribbble - Biggest web design inspiration website
  • Bihance
  • Figma community - The world of designs with figma
  • Coderops - Codrops is a destination for web design and development enthusiasts.
  • Codepen
  • Free frontend - Free hand-picked code examples, tutorials and articles.
  • Code my UI - Handpicked collection of Web Design & UI Inspiration with Code Snippets.
  • UI Faces - get example profile images
  • CSS buttons example - A list of awesome buttons for using them.
  • UI Store design - 656 Free Handpicked UI Kits for your real life projects
  • Sketch app sources - Thousands of UI/UX resources from great and resourceful designers around the world.
  • UI8 - 8,667 curated design resources to speed up your creative workflow.
  • XD Guru - Adobe XD Resources, UI kits & Templates
  • Sketch repo - Sketch templates and Sketch resources for your next design project. Free, high quality icons, mockups, and UI kits for Sketch App.
  • Free design resources - Daily Freebies for Creatives
  • Free CSS - Free CSS has 3552 free website templates
  • cssbuttons - Button collection with a focus on simplicity and ease of use.
  • Checkboxes examples - A list of Beautiful CSS checkboxes examples.

Shape makers

Fonts

  • Font Converter - Convert font file to any type
  • Gliphter - Create icon fonts in seconds! Just drag & drop SVGs onto the character grid and download your spiffy new font. Cherry on top - IT'S FREE!
  • Typescale - Create stunning typography, generate CSS, and find inspiration.
  • Font library - An open source project to tag Google Fonts.
  • Font squirrel - Handpicked free fonts for graphic designers with commercial-use licenses.
  • Font space - Free downloads of legally licensed fonts that are perfect for your design projects. The best place in the universe to search for amazing fonts.
  • Abstract fonts - Download more than 10,000 free fonts hassle free, desktop and mobile optimized, around for more than 20 years. Categories, popular, designers, optional web font download and links to similar fonts.
  • 1001 fonts - 56932 free fonts in 32193 families Β· Free licenses for commercial use Β· Direct font downloads Β· Mac Β· Windows Β· Linux
  • Fontsly - Big collection of Free Fonts for Download. Browse fonts by style, by type, by alphabet, by author or by popularity. Everyday updates!
  • 1Fonts by AliMD - Good Collection of Farsi(Persian)/Arabic Fonts to use on the web . made by iranian to use in easy way.

Layouts

CSS loaders

  • CSS loading animations - CSS loading circle and create online CSS Loading effect animations.
  • Spinner kit - Simple CSS Spinners
  • whirl - CSS loading - CSS loadings
  • cssloaders - CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. Hence it is easily customization too.
  • Pure CSS loader - 12 CSS spinners with CSS animation optimized in size, speed and dev-friendly for your next web project
  • CSS loader generator - Generate the perfect loader with our online collection of spinners and loaders for CSS, currently 310 to select from.

Utils

  • webcode tools - Awesome tool for web developers, generate any section of your website ✨
  • Tiny PNG - The papular tool for compress images
  • Make gitignore files - make gitignore files as easy.
  • SVG to JSX - convert SVG to JSX to use in ReactJS apps.
  • Keycode info - KeyCode.Info allows users to press any key and instantly get the JavaScript Key or Key Code KeyboardEvent. Check out the Tool and Event List.
  • Unused CSS - UnusedCSS is an online tool to remove unused CSS rules. It will check your pages, find unused CSS and let you download a clean CSS file.
  • JSON Check - Visualize your JSON code
  • Base64 - Optimize your images and convert them to base64 online. Drag & Drop your files, copy to clipboard with a click and use the result in HTML and CSS.
  • CSS Ruler - Explore CSS lengths.
  • Can i use - "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
  • Can i email - Support tables for HTML and CSS in emails
  • CSS tools online - Collection of CSS Tools which helps developer to solve css problems.
  • Hidden tools - Discover a wide collection of unique tools.
  • Programming language convertor - Convert any program languages
  • Down for everyone or just me - Check if a website or app is down for everyone or just you.
  • Am i responsive - Show off how responsive design looks across different browsers easily with this 4 in 1 viewport tool
  • What runs - Explore the world of website technologies with WhatRuns.com. Identify content management systems (CMS), frameworks, analytics tools, and more.
  • Clean mock - Mockup your website and design simply and beautifully.
  • Really good emails - With over 12,000 curated emails and counting, discover the best examples to help build your next campaign. Get inspiration and join millions of marketers.
  • PWA Manifest Generator - Automatically generate a fully functional web app manifest along with size-optimized icons for your PWA.
  • Free Sound Effects - 150,000+ professionally recorded SFX. Free sound effects downloads for your creative projects.
  • Haikei - Generate unique SVG design assets

learning

  • 30 seconds of code - Discover short code snippets for all your development needs.
  • CSS reference - CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
  • HTML reference - A free guide to all HTML elements and attributes.
  • CSS battle - The funnest CSS game for web designers & developers
  • Code wars
  • Wordpress video tutorals - Learn WordPress directly from the experts! Video-based instruction, live events, detailed tutorials, and interactive chat. New content every month.
  • CSS Author - CSS Author is a design and development blog.
  • CSS tricks - CSS-Tricks is a website about websites.
  • Site my point - Learn Web Design & Development with SitePoint tutorials, courses and books - HTML, CSS, JavaScript, PHP, Responsive Web Design.
  • Freecodecamp - freeCodeCamp is a community of people from all around the world who are learning to code together. We're a 501(c)(3) public charity.
  • Daily dev - Where developers suffer together
  • egghead - Learn Modern Web Development in a Fraction of the Time
  • Dev community - A constructive and inclusive social network for software developers. With you every step of your journey.
  • Devdocs - Fast, offline, and free documentation browser for developers.
  • Fun javascript projects - A FREE series of fun JavaScript, HTML & CSS projects.
  • 1LOC - Top JavaScript utilities, in just One Line of Code!
  • Short code - A collection of useful snippets and code examples. Elements, attributes and selectors.
  • devhints - A collection of cheatsheets.
  • Flex - cheatsheets of flex-box.
  • FlexBox Froggy - a game where you help Froggy and friends by writing CSS code!
  • Grid - cheatsheets of grid.
  • Grid Garden - Grid Garden, where you write CSS code to grow your carrot garden!
  • Git - Good and simple Git tutorial for begginer for free made by w3schools.

Good for you

  • GetTerms - Make privacy and policy content for your website
  • prioritize your tasks - Built by a PM for PMs. Use this tool to create, visualize, and prioritize tasks on a drag and drop interface with different priority boards.
  • Pomofocus - A simple Pomodoro Timer app that works on a desktop & mobile browser. Pomofucus will help you manage your time and let you focus on any tasks such as study, writing, or coding.
  • Music for programming :) - Musics for you :) enjoy
  • HTTP Cat - An API for the awesome HTTP Cats! Use it in your website to show funny error messages.
  • HTTP Dog - A free HTTP status code API with lots and lots of awesome dogs! Use it to show useful error messages in your website for HTTP response status codes.
  • Get station - Station unifies all your work tools in one neat and productive interface.

AI

  • Image editor with AI - Hotpot helps you create amazing images, graphics, and writing with AI. Visualize ideas with AI Image Generator, reimagine yourself with AI Headshots, or spark creativity with other products from our AI platform.
  • Seona Ai - Streamline your SEO efforts with Seona! Our AI-powered assistant provides automatic weekly optimizations, ensuring your small business ranks higher on search engines. Start your journey towards more visibility and growth today with Seona.
  • DeepSeek Chat AI - Chat with DeepSeek AI.
  • Rix - ChatBot for solving your programming bugs. Rix is still under beta and may make inaccurate statements.

The list will grow over time! Have fun using it! ❀️✌️

About

🎊 A list of website and CSS tools

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published