Links
Openly licensed tools, icons, fonts, images, and other resources for designers working in open source.
Open Source Design
This is a showcase of the many websites and platforms where you can find openly licensed icons, fonts, images, tools, and other resources. You can use them for any purpose, also commercial (some works have specific licenses, so always make sure it’s fine to use).
Resources directory
132 resources
Projects 20
Open source projects with active design teams, blogs, and processes: good places to see open design in practice or to start contributing.
- Mozilla Makers of the Firefox browser. · UX blog
- GNOME Desktop environment. · Design blog · Design team · Human Interface Guidelines
- GitLab Git hosting and code collaboration. · UX team
- Nextcloud Data sync and sharing. · Design page
- Fedora Linux distribution. · Design blog · Design team wiki
- Canonical (Ubuntu) · Design blog
- WordPress · Design discussion · Handbook
- Drupal · Usability group · UI standards
- Diaspora Decentralized social network. · UI issues on GitHub
- MediaGoblin Media platform.
- BeWelcome Hospitality platform.
- Mailpile Mail interface. · Issues on GitHub
- Ghost Simple blogging platform.
- Terms of Service; Didn't Read Contract rating.
- LibreOffice · Design team wiki
- Trustroots Hospitality platform.
- Automattic The company behind WordPress.com, WooCommerce, and Jetpack. · Design blog
- XWiki Development platform. · Design wiki
- elementary OS Linux distribution. · Human Interface Guidelines · Design blog
- Plasma Desktop environment by KDE. · KDE · Design page · Human Interface Guidelines
Icons 16
- Bitcoin Icons Open source icons made for Bitcoin applications, free to use. MIT licensed.
- Circum Icons Consistent open source icons as SVG for React, Vue, and Svelte.
- Font Awesome The iconic font and CSS toolkit with a large free tier. · GitHub
- Font Fabulous A fabulous icon set packaged as a font, free to use. · GitHub
- IcoMoon CC icons and free-to-use icon-font creation software.
- IconMonstr A large collection of glyph icons, free to use and modify without attribution.
- Iconoir SVG icons, MIT licensed.
- Inkscape Open Symbols Open source icon sets to use as Inkscape symbols.
- Mono Icons A simple, consistent open source icon set for a wide variety of digital products. MIT licensed.
- Pictogramas Open source free icons.
- Remix Icons Huge repository of consistent, neutrally styled icons. · GitHub
- React Icons SVG React icons from popular icon packs. · GitHub
- Feather Icons Simply beautiful open source icons. MIT licensed. · React version
- Styled Icons Icon packs like Font Awesome, Material Design, and Octicons as React styled-components. · GitHub
- The Noun Project CC and purchasable icons for personal and commercial purposes.
- Tabler Icons Open source SVG icons in a visually consistent style. MIT licensed. · GitHub
Fonts 11
Some of these platforms also take submissions, so if you designed a font with an open license, submit it there!
- The League of Moveable Type
- Font Library
- Google Web Fonts
- Libre Fonts by Womxn
- Open Foundry
- Open Source Publishing Foundry
- Velvetyne
- Use & Modify
- FontForge Font editor.
- Metaflop Parametric font editor.
- Type:Bits Collaborative type design workshop.
Images 11
- Pixabay
- Flickr Creative Commons
- Gratisography
- The Stocks
- StockSnap
- NYPL Public Domain Images Public-domain digital collections of the New York Public Library.
- unDraw Open source illustrations.
- Interfacer
- Open Doodles Free sketchy illustrations.
- Unsplash
- Pexels
Creative Commons media 4
Media from big platforms published under Creative Commons licenses.
- Openverse Search over 800 million openly licensed images and audio files (formerly CC Search).
- Wikimedia Commons
- YouTube Creative Commons licensed videos on YouTube.
- SoundCloud Creative Commons licensed sounds and music.
Design tools 18
Design discussion also happens right on a project’s issue tracker, for example at GitHub: get an account, identify design issues, participate, and open new ones. A »Design« label groups them, like in the Nextcloud issues.
- Pen & paper Mockups and prototypes without hi-fi Photoshop work.
- draw.io Diagrams, mockups.
- Pencil Mockups.
- Penpot Mockups.
- Quant UX Mockups, UX testing, heatmaps.
- Krita Art, digital painting.
- Blender 3D rendering, animation, textures.
- darktable Photo workflow.
- RawTherapee Photo workflow.
- digiKam Photo management.
- GIMP Image manipulation, compositing.
- Inkscape Vector elements, print export.
- Synfig Animation.
- Natron Compositing, VFX, motion graphics.
- Scribus Page layout, desktop publishing.
- DisplayCAL Color calibration.
- Kdenlive Video editing.
- Figma UI design, wireframes, prototypes.
Color 5
- Blend CSS gradient generator.
- Leonardo by Adobe Color contrast generator.
- Tanaguru Contrast-Finder For finding complementary colors.
- colors.lol Overly descriptive color palettes.
- Color Hunt Color palettes for designers and artists.
CSS frameworks 8
- Bootstrap Fully featured, mature HTML, CSS (LESS), and JavaScript.
- Foundation Fully featured, mature HTML, CSS (Sass), and JavaScript.
- Basscss Lightning-fast, modular CSS for designers.
- Bourbon A simple and lightweight mixin library for Sass.
- Kickoff A lightweight front-end framework for scalable, responsive sites.
- Space Base A Sass-based responsive CSS framework.
- Rebar Simple, lightweight HTML and CSS (LESS).
- PatternFly A community of designers and developers building a UI framework for enterprise web applications.
Design reads 11
- First Rule of Usability? Don't Listen to Users Jakob Nielsen, 2001.
- 10 Heuristics for User Interface Design Jakob Nielsen, 1995.
- Principles of User Interface Design Joshua Porter.
- Ten Principles for Good Design Dieter Rams, 1970s.
- A Beginner's Guide to Finding User Needs
- Don't Make Me Think Steve Krug's usability classic (book).
- The Design of Everyday Things Don Norman's design classic (book).
- Humane by Design
- Human Flourishing Design Guide
- Designing for Trust Data trust by design, principles, patterns, and best practices.
- Inclusive Design: Cards for Humanity
Open source design reads 6
- Free Software UI Havoc Pennington, 2002.
- How Not To Design a Portfolio
- Open Design Now Book.
- Coordinating usability & testing in Free Software Thesis, 2011.
- Barriers Faced by Newcomers to Open Source Projects A systematic review by Steinmacher, Silva, and Gerosa, 2014 (research paper).
- An Exploration of Fedora's Online Open Source Development Community Ethnographic study by Diana Harrelson, 2010 (research paper).
Community & inspiration 10
Other nice stuff in the design and open source space.
- Libre Graphics magazine Print magazine.
- Libre Projects Collection of nice open source web apps.
- Libre Arts News for creative professionals using free software (formerly Libre Graphics World).
- Libre Graphics Meeting Conference.
- Beautiful Open Beautiful sites for open source projects.
- Open Design and Hardware Group OKFN open design and hardware group.
- PIXLS.US Free and open source photography. · Software list
- Photos of Design Research On Wikimedia Commons.
- Checklist Design A collection of UX and UI best practices.
- Untools Tools for better thinking.
Learn to code 9
Focused on HTML, CSS, and JavaScript. Ideally to implement your own suggestions, but also to better discuss with developers and understand why and how certain things work and don’t work.
- Mozilla Developer Network Great web dev documentation.
- Transitional Interfaces, Coded For good animations.
- Codecademy Interactive tutorials.
- Git basics GitHub's guide to getting started with Git.
- code.org
- Egghead Video courses on web development.
- tota11y A bookmarklet to check that your website is accessibility compliant.
- Open Source Guide: How to Contribute to Open Source
- Course: How to Contribute to an Open Source Project on GitHub
Learn to design 3
- Hack Design Free design lessons by inspirational designers.
- Designlab Design courses with mentorship and projects.
- Voice and Tone Mailchimp's guide to writing good copy.