This guide provides useful resources that available online for you to use with your WEB/UI project. Included is a explanation of open source licensing terms.

Understanding Open-Source Licensing Terms

You will find many resources online that you may want to include in your website: images, fonts, themes, templates, plug-ins etc… Before you use them in your website it is important to check the licensing terms to confirm that your use is in compliance with the agreement. You must follow all stipulations included in the agreement.

When it comes to open-source resources, many of the licensing terms you will encounter grant you permission to use the resource pretty freely. But there are exceptions. Before using anything you find online check:

• Is there a restriction on commerical use?
• Is attribution required? If so - what does that entail?
• Not all open-source resources are entirely free: sometimes there is a free and pro version. The pro version will likely require a fee. Just because you can download it does not mean you are licensed to use it without payment.

Also, for your own projects - always specify a license agreement.

Here is some information on some popular open-source license agreements:

• MIT Licenses
• Creative Commons
• Public Domain “Creative Commons Zero”
• GNU Licenses

Available Resources

Here are some resources that are available online that may be of use to you on your project:

Fonts

When it comes to free and open-source fonts used on websites - Google Fonts pretty much dominates. Google also offers icons (Material Symbols). You may want to look at the Noto fonts: it is intended to be a font that is available in all languages.

• Google Font Collection
• Google Icons (Material Symbols)

Images

If you are looking for images for your website, I would start with these:

• UXWing: A collection of free icons availabel for use on non-commercial and commercial projects without attribution. The collection contains well optimized free SVG and PNG icons that can be used on interface design, web and application development.
• SVGRepo: 500.000+ Open-licensed SVG Vector and Icons: Search, explore and edit the best-fitting free icons or vectors for your projects using a wide variety vector library. Download free SVG vectors and icons for commercial use. Check the license terms carefully - some require attribution.

The majority of the UXwing images are monochromatic (black on a transparent white background). The easiest way I have found to change the colors of an SVG file is to use this free tool: DeEditor.

Other Resources

• Font Awesome is a collection of fonts available in two versions: free and paid. It is pretty popular and fairly easy to use.