November 18, 2020

1108 words 6 mins read

Open Source Icon Collection and CSS Related Projects

Open Source Icon Collection and CSS Related Projects

We usually need some design assets everytime we start a new web or software project, in particular graphic asset including icon sets and other design/visual matters. Fortunately there are people who did great jobs on many awesome projects and share those with us.

In the following, we list 80+ notable open source repositories for icon collections and Cascading Style Sheet (CSS), which might help us in kickstarting new projects.

Icon Sets / Collections

akveo/eva-icons A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.
astrit/ 500+ CSS Icons. Customizable, Retina Ready with API & NPM
edent/SuperTinyIcons Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
erikflowers/weather-icons 215 Weather Themed Icons and CSS
feathericons/feather Simply beautiful open source icons
fontello/fontello Iconic fonts scissors
FortAwesome/Font-Awesome The iconic SVG, font, and CSS toolkit
google/material-design-icons Material Design icons by Google
iconic/open-iconic An open source icon set with 223 marks in SVG, webfont and raster formats
icons8/titanic A set of animated icons + code to insert them into the webpages
microsoft/fluentui-system-icons Fluent System Icons is a set of mobile platform icons from Microsoft
mikepenz/Android-Iconics Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
mikolajdobrucki/ikonate Fully customisable & accessible vector icons
oblador/react-native-vector-icons Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling.
react-icons/react-icons svg react icons of popular icon packs
refactoringui/heroicons A set of free MIT-licensed high-quality SVG icons for UI development.
ryanoasis/nerd-fonts Iconic font aggregator, collection, & patcher. 3,600+ icons, 50+ patched fonts: Hack, Source Code Pro, more. Glyph collections: Font Awesome, Material Design Icons, Octicons, and more
saeedalipoor/icono One tag One icon, no font or svg, Pure CSS
simple-icons/simple-icons SVG icons for popular brands
tabler/tabler-icons A set of over 300 free MIT-licensed high-quality SVG icons for you to use in your web projects.
twbs/icons Official open source SVG icon library for Bootstrap.
webkul/vivid a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.
bootstrap-vue/bootstrap-vue BootstrapVue, with over 45 plugins, more than 85 custom components and over 500 icons, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
devanshbatham/FavFreak Making Favicon.ico based Recon Great again !

CSS Framework / Library

tailwindcss/tailwindcss A utility-first CSS framework for rapid UI development.
franciscop/picnic :handbag: A beautiful CSS library to kickstart your projects
jgthms/bulma Modern CSS framework based on Flexbox
igoradamenko/awsm.css Simple CSS library for semantic HTML markup
papercss/papercss The Less Formal CSS Framework
linkedin/css-blocks High performance, maintainable stylesheets.
lucagez/medium.css Compact typography for the web
vincentdoerig/latex-css LaTeX.css is a CSS library that makes your website look like a LaTeX document
mertJF/tailblocks Ready-to-use Tailwind CSS blocks.
edwardtufte/tufte-css Style your webpage like Edward Tuftes handouts.
astrit/ 500+ CSS Icons. Customizable, Retina Ready with API & NPM
claviska/shoelace-css A back to the basics CSS starter kit.
creativetimofficial/tailwind-starter-kit Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source
franciscop/picnic :handbag: A beautiful CSS library to kickstart your projects
bradtraversy/design-resources-for-developers Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more
bradtraversy/ui_components Collection of HTML & CSS UI components
bradtraversy/vanillawebprojects Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries
AllThingsSmitty/css-protips A collection of tips to help take your CSS skills pro
30-seconds/30-seconds-of-css Short CSS code snippets for all your development needs
4Catalyzer/astroturf An “artificial” CSS-in-JS for those that want it all.
addyosmani/critical Extract & Inline Critical-path CSS in HTML pages
ademilter/chrome-css-grid-highlighter Css Grid Highlighter for Chrome
aFarkas/lazysizes High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
callstack/linaria Zero-runtime CSS in JS library
caneco/design-tips The Design Tips series, now in TailwindCSS
cssanimation/css-animation-101 Learn how to bring animation to your web projects
danielwestendorf/breezy-pdf-lite Simplified, self-hosted, version of HTML/CSS/JS in, PDF out, via Chrome
delight-im/HTML-Sheets-of-Paper Word processor in your browser using HTML and CSS (for invoices, legal notices, etc.)
dwyl/learn-tachyons :heart_eyes: Learn how to use Tachyons to craft beautiful, responsive and fast UI with functional CSS!
emotion-js/emotion CSS-in-JS library designed for high performance style composition
epicmaxco/epic-spinners Easy to use css spinners collection with Vue.js integration
eqcss/eqcss EQCSS is a CSS Reprocessor that introduces Element Queries, Scoped CSS, a Parent selector, and responsive JavaScript to all browsers IE8 and up
FullHuman/purgecss Remove unused CSS
IBM/css-gridish Automatically build your grid designs CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.
jbtronics/CrookedStyleSheets Webpage tracking only using CSS (and no JS)
jeeliz/jeelizFaceFilter Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D…).
jhu-ep-coursera/fullstack-course4 Example code for HTML, CSS, and Javascript for Web Developers Coursera Course
Kozea/WeasyPrint WeasyPrint converts web documents (HTML with CSS, SVG, ) to PDF.
linkedin/opticss A CSS Optimizer
manatlan/vbuild “Compile” your VueJS components (sfc/*.vue) to standalone html/js/css … python only (no need of nodejs). Support python components too !
marionebl/svg-term-cli Share terminal sessions via SVG and CSS
microsoft/frontend-bootcamp Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux
muicss/johnnydepp A tiny dependency manager for modern browsers (992 bytes)
nodegui/nodegui A library for building cross-platform native desktop applications with Node.js and CSS . For React NodeGui, visit:
oliver-gomes/csswand Hover your wand and use your magic spell to copy beautiful css
paypal/glamorous DEPRECATED: Maintainable CSS with React
picturepan2/instagram.css Instagram.css - Complete set of Instagram filters in pure CSS
react-toolbox/react-toolbox A set of React components implementing Google’s Material Design specification with the power of CSS Modules
Sly777/ran :zap: RAN! React . GraphQL . Next.js Toolkit :zap: - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more…
styled-components/styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
tailwindlabs/headlessui Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
typestyle/typestyle Making CSS Typesafe
umpox/TinyEditor A functional HTML/CSS/JS editor in less than 400 bytes
uncss/uncss Remove unused styles from CSS
webkul/micron a micro Interaction library built with CSS Animations and controlled by JavaScript Power
zeit/styled-jsx Full CSS support for JSX without compromises
Simonwep/pickr Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
SortableJS/Sortable Sortable is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Ember, Knockout and any CSS library, e.g. Bootstrap.
comments powered by Disqus