Skip to content

Latest commit

 

History

History
235 lines (200 loc) · 12.4 KB

resources.md

File metadata and controls

235 lines (200 loc) · 12.4 KB
Raw
layout title permalink
post
Resources
/resources/

This is a showcase of the many websites and platforms where you can find openly licensed icons, fonts, image, 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).

Icons

  • 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.
  • FontAwesome The iconic font and CSS toolkit. Free to use. CDN. GitHub.
  • Font Fabulous A fabulous iconset 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 from a German artist. Free to use without attribution and free to modify.
  • Iconoir SVG. MIT licensed.
  • Inkscape Open Symbols Open source icon sets to use as Inkscape symbols.
  • Mono Icons A simple, consistent open-source icon set designed to be used in a wide variety of digital products. MIT licensed. GitHub
  • Pictogramas Open source free icons
  • Remix Icons Huge repo of consistent neutrally styled icons. GitHub
  • React Icons SVG react icons of popular icon packs. GitHub
  • React Feather Icons Collection of simply beautiful open source icons for React.js. GitHub
  • Styled Icons Icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components. GitHub
  • The Noun Project CC and purchasable icons. for personal and commercial purposes.
  • ToIcon All icons are licensed under a Creative Commons.
  • Tabler Icons Open source SVG icons in a visually consistent style. MIT licensed. GitHub

Fonts

Some of these platforms also take submissions, so if you designed a font with an open license, submit it there!

Images

Media from big platforms under Creative Commons licenses

Design tools

  • Use a pen & paper for mockups and prototypes. No hi-fi Photoshop work needed.
  • 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 for animation
  • Natron (compositing, VFX, motion graphics)
  • Scribus (page layout, desktop publishing)
  • DisplayCAL (color calibration)
  • Kdenlive (video editing)
  • Figma (UI Design,wireframes,prototypes)
  • Design discussion on the issue tracker of the project. For example at GitHub – get an account, identify design issues, participate, and open new issues. Establish a »Design« tag on the tracker to group these issues, for example like in the Nextcloud issues.

Color Choices

CSS Frameworks

  • Bootstrap Fully featured mature HTML, CSS (LESS) & Javascript.
  • Foundation Fully featured mature HTML, CSS (Sass) & Javascript.
  • BASCSS Lightning-Fast, Modular CSS for Designers.
  • Bourbon A simple and lightweight mixin library for Sass.
  • Kickoff A lightweight front-end framework for creating scalable, responsive sites.
  • Space Base A sass-based responsive css framework.
  • Rebar Simple lightweight HTML, CSS (LESS)
  • PatternFly A community of designers and developers collaborating to build a UI framework for enterprise web applications.

General Design Reads

Open Source and Design Reads

Other nice stuff in the design + open source space

Learn to Code

Focused on HTML, CSS, Javascript. Ideally, to be able to implement your own suggestions. But also to better discuss with developers and be understand why and how certain things work and don’t work.

Learn to Design

Learn about design concepts! :)