These free photos certainly make design work easier, but finding high-quality photos for hero images can be a real pain. That’s why I’ve curated the absolute best sites to help you find HQ photos for all your web design projects.

NegativeSpace

First in this collection is NegativeSpace, featuring a gorgeous high-resolution gallery of stock photos. But these photos don’t have that cheesy vibe you typically expect from stock photo sites.

They all look incredibly natural and they span a wide array of topics. You can find photos to use on a business website, a restaurant homepage, or even pictures to use as featured photos on your personal blog.

Categories are easy to browse through and the layout is incredibly simple. If you need genuine-looking stock photos then start with NegativeSpace.

Gratisography

Gratisography is probably the most unique site in this bunch, with thousands of some of the quirkiest and sometimes even weird free stock photos you can find.

Started by creative Ryan McGuire, these photos are truly one of a kind. Not only won’t you find them anywhere else, they are unlike any others that populate other stock photo sites. They are pretty specific in their uniqueness, so if you’re looking for that perfect fit photo (or vector illustration), you could find it here.

LibreStock

All the photos on LibreStock come from dozens of other sources. This site works like a search engine for CC0 stock photography where you can enter a search term and browse 40+ different sites all at once.

Since many stock photo sites are small, they also don’t have many photos. But the photos they do have are usually unique and not found elsewhere. So LibreStock saves you time searching all these sites at once and curating the results in one place.

This is my go-to resource to search all the smaller sites before visiting the larger ones. They’ve also recently launched a free video search engine as well.

Picography

Next on the list is Picography, with a constant stream of new photos added every day. Not only are many of these photos unique to this site, but there are thousands to choose from and more to come.

This site is easy to search so you can find just the right photo for your needs and you’re not likely to see it being used anywhere else.

StockSnap

With StockSnap you can actually make your own account and curate all your favorite photos together.

All StockSnap photos are CC0 and they’re certainly large enough for hero images. And since you can bookmark your favorites you have easy access to find the original photographer, the tags, and even related photos based on size/color and content.

Stockvault

Stockvault has been around awhile, and that means it has, well, a literal vault full of thousands of free stock photos available for download. Search the vast collection and you will find a wide variety of pics for whatever you need.

Startup Stock

Tech blogs and startups thrive on great photography. That’s why Startup Stock Photos has to be in this list.

It’s a fairly new website but the quality is exquisite. I haven’t seen these photos anywhere else so they must be uniquely featured here with the goal of helping writers & startup founders add quality images to their site.

You can read a bit more about the site in this post written by one of the creators.

ShotStash

ShotStash is a bit of a “boutique” type of stock photo site, aimed at “creative professionals”. With a smaller but more specific selection you should be able to find some solid unique options here.

ISO Republic

ISO Republic has a great mix of free stock photos and videos with a variety of subjects, including business, technology, food, and many others. One really nice feature is being able to narrow your search to videos only, if that’s what you’re looking for. All of their content is under CC0 license so you can download, edit, and reuse them on any projects. Awesome!

Foodie Factor

If you’re looking for high quality and unique images of delicious food beyond today’s Instagram fare, Foodie Factor is a great resource to bookmark. It’s a very specific niche, but this recently relaunched site has beautiful photos of wonderful dishes that will add mouth-watering depictions to your projects. Check it whenever you’re looking for food-related free stock photos, as they are adding new photos all the time.

Flat Lay Stock

New to the scene is FlatLayStock.com, where you can find an ever-growing variety of flat lay stock photos, perfect for use in mockups for logos, backgrounds, and more.

These are my favorite hero image resources but there are many others, like Free Nature Stock that you might like to try for free nature photos and videos.

But if you keep some of these sites bookmarked you’ll have access to the vast majority of new images right at your fingertips.

After scouring through CodePen, I’ve organized the absolute best calendar UIs I could find that was created specifically for websites. All of these calendars run on CSS for the interface, although some add JavaScript functionality to create some cool interactive features.

Take a peek at these snippets and see what you think!

Colorful Calendar UI Concept

See the Pen CSS-only Colorful Calendar Concept by David Khourshid (@davidkpiano) on CodePen.default

This first demo really grabbed my attention due to its bright color scheme and impeccable style.

Surprisingly, this colorful calendar even lets you move up & down the page with small arrow icons. The entire calendar run solely on HTML and CSS, so completely JavaScript-free.

The idea actually came from a shot on Dribbble and was coded into reality by developer David Khourshid.

Certainly a unique take on calendar design and this color scheme is one for the record books.

SVG Seasons

See the Pen SVG season calendar with animated header by Joke Gysen (@keukenrolletje) on CodePen.default

We often associate the months with seasons, and most print calendars reflect this. So why not bring that seasonal charm to your digital calendars too?

This seasonal calendar design uses custom SVGs and some basic animation to create dynamic seasonal headers. You can move between months using the arrow icons and you can even click on the dates to select them.

I’m quite fond of the date selection animation since it mimics the act of someone drawing over the date. Feels just like print without the paper!

CSS-Only Mobile Cal

The concept of this design is beyond incredible. It runs purely on CSS and lets you select a date range from a mobile calendar UI, then select whatever you want to schedule in for that date (appointments, vacations, etc).

But since this follows the idea of a mobile app UI it’s probably not the most persuasive case for CSS.

Either way, the implementation is superb, and I’m still amazed this works using just HTML and CSS.

Calendar Widget

See the Pen Calendar Widget by Ciprian Ionescu (@ciprianionescu) on CodePen.default

For this calendar widget you can actually save certain events on the calendar just by picking a date. Again it runs without JavaScript so I’m really impressed with the quality.

Developer Ciprian Ionescu uses small dots to indicate whenever something is saved on a certain date.

You can just click the calendar date to open up a small text field, enter your to-do item, then click to close.

A very simple widget that could prove useful on some sites.

Fullscreen Flat Calendar UI

See the Pen Full Screen Flat Calendar by Ricky Eckhardt (@rickyeckhardt) on CodePen.default

Here’s a design that’s much less interactive but also quite dynamic. With this fullscreen calendar you can tell that the developer Ricky Eckhardt put some effort into the project.

It does work in pure CSS but to keep the height perfectly aligned with the container, Ricky has used some necessary JavaScript. You could bypass this if you don’t need the height to fit 100% perfectly and you could instead set default paddings for the calendar elements.

Still a pretty cool effect and it even reminds me of the classic Google Calendar UI.

Square Blocks

This custom calendar is actually based on an older shot posted to Dribbble back in 2009.

It’s a clear square interface where elements are delineated by borders and custom backgrounds. Probably not the strongest use of a custom calendar but certainly a brilliant starting point for designers.

And this one is 100% pure CSS so you can get it going on any site without scripting.

Flip Animation

See the Pen Calendar Flip Animation by Gabriel Colombo (@gabrielcolombo) on CodePen.default

You don’t see custom 3D animations on calendars too often. But this one’s pretty unique because the design relies on pure CSS, yet the flip animation runs as a custom jQuery method.

If you click any of the days in the calendar it’ll perform a 3D flipping effect to rotate over to the back side. From there you can enter data for planning events or scheduling.

Realistic Planner

See the Pen Calendar by Benjamin (@maggiben) on CodePen.default

Classic skeuomorphism may have gone away but there’s plenty of room for merging minimalist designs with skeuomorphic ideas.

That’s kinda what you get in this neat planner calendar that looks like a traditional flip-top print calendar. All the months are fully dynamic and powered by JavaScript so you can move forward using the arrows on either side of the header.

Note the days aren’t clickable and that this calendar isn’t super interactive. But as a general base to start designing, I’m a fan of this concept.

Semantic Calendar UI

See the Pen Semantic UI – Calendar by KIM JONG IL (@nijin39) on CodePen.default

You can build a lot of cool stuff with the Semantic UI framework. No doubt this calendar is one such example.

Most of the interface elements are just for show but the calendar sorting features work just as you’d expect. And since this runs solely on Semantic UI the entire design is powered by that default stylesheet.

Who knew that such a powerful design could come from such a small frontend library?

Angular.js Calendar

See the Pen FlexCalendar by Russian Rebouças (@Russian60) on CodePen.default

On the flip side we have Angular.js which is one of the largest frontend frameworks. This goes beyond simple interface styles to create a structure for developers to create dynamic webapps.

And this custom calendar UI named FlexCalendar is a really cool example running on Angular. It doesn’t let you add custom content or store anything in a local JSON database or anything crazy.

But it works like an interactive calendar should, and it’s powered solely by the Angular.js library.

It’s great to see web designers dive into JavaScript and this calendar demo is one prime reason to learn.

Dark Calendar UI Alternative

See the Pen Responsive Calendar by Kenny Sing (@KennySing) on CodePen.default

Most of these calendars follow the typical white background style we’re familiar with. But what about a dark calendar UI?

Where there’s a will there’s a way and developer Kenny Sing found a way to craft this rich calendar interface from scratch.

It runs on pure CSS code has some pretty neat hover effects too. Plus the whole thing fits into a fullscreen design so it’s probably one of the more versatile calendars you’ll find.

Now, I can’t say any of these demos would be useful for a datepicker U, but they offer some great starting points for designing your own CSS-powered calendar.

This also means you’ll find tons of awesome Sketch freebies online ranging from complete mockups to detailed UI kits. And in this post, I’ve curated my top 10 picks for the best freebie UI kits for any Sketch user.

iOS Design Kit

Every new release of iOS prompts an updated GUI kit and this freebie is by far the most comprehensive one to date.

It covers all the major elements for iPhone and iPad apps with free kits for most design software. You’ll find PSDs for Photoshop too, but you can download just the Sketch files with the same iOS-styled vector elements.

These elements all come in @1x size, but since they’re vectors you can easily resize them without any quality loss.

Google Now UI

One of Google’s lesser-known projects is the Google Now prediction app. Designer Manu Akash created a variation of the Google Now UI as a Sketch freebie.

This kit features a lot of the main application pages but also uses styles from the material design library. It’s a great freebie to keep saved if you want to design Android apps while following Google’s design styles.

Blog Kit

Free blogging platforms like Medium have changed the face of writing on the web. And this free blog UI kit shows what’s possible with a great mobile application UI following that same tactic.

Designer Thomas Budiman created this blog/writing kit for Sketch with a focus on mobile app design. It spans many different types of interfaces like gallery pages, article archives, and signup/login forms for new users.

Move Mobile UI Kit

Move UI is a free mobile app mockup pack created by Czech designer Volodymyr Kurbatov. This pack doesn’t focus specifically on elements, but rather on screen designs and interfaces for different situations.

But in these interfaces you’ll find all the common mobile elements like buttons, input fields, tabs, post archives, slideshows, and pretty much everything else you might use for a custom mobile application.

This freebie is hosted on Gumroad so it works through their checkout system, but notice it’s a whopping $0, so it won’t cost you anything to download.

Coffee Shop iOS Kit

For a very unique eCommerce-style UI kit check out this coffee shop freebie designed in Sketch. It mimics an iOS application for a local coffee shop with over 50 screens covering the shop menu, checkout, and product pages(among many others).

The coolest thing about this freebie is the ease of use. You can take this design and customize it however you want to create any type of mobile eCommerce interface.

Each element is a scalable vector and the text is all based on free Google Webfonts.

Social Leads App

Social media is a huge part of today’s web and this freebie offers a really cool start for mobile designers.

The interface kit comes with a handful of screens showcasing a social marketing application. The screens feature user lists, login fields, profile pages, and photo upload/edit screens for interactivity.

Many of these elements can be expanded to a full website layout so don’t feel constrained to a mobile design. This UI kit also follows the material design language so it’s best suited for Android or Google-type interfaces.

Bootstrap UI Kit

The Bootstrap library is hugely popular amongst designers and it’s the fastest way to get a new project online. You can always start by coding the layout first, but it’s usually easier to work with a mockup like this BS3 UI kit.

This is totally free to download in both AI and Sketch format. Each element perfectly matches with the Bootstrap 3 kit, and it uses Glyphicons, just like Bootstrap.

If you’re designing with Bootstrap, then you’ll absolutely want a copy of this freebie.

And if you’re eager to move into Bootstrap 4 then check out this Sketch freebie of the BS4 grid system. It’s not a complete BS4 kit since that version is still in Alpha release, but hopefully we’ll see more of those freebies in the next couple years.

Harmony UI Kit

This mobile map UI kit features all the pin drops, location arrows, and search features you’d expect from a geolocation app. The Harmony UI Kit by Dawid Młynarz is one of the newer Sketch freebies on this list first being released in mid-2017.

It comes with a dozen mobile app screens of map interfaces and search features for finding directions on a phone.

The UI kit is totally free but it’s also hosted on Gumroad so the download process can feel a little weird.

Tinder iOS UI Kit

Here’s another niche mobile UI kit based on the Tinder interface. This freebie was created by Gilberto De La Garza and released for free on Sketch App Sources.

It comes packed with 15 different views for profiles, user lists, dating info, and photo pages. This interface kit mimics the Tinder application, but you can pick out smaller elements from this UI kit and use them on your own.

Sketch is perfect for iOS app design because it lets you resize elements without any quality loss. That’s why kits like this Tinder freebie are so valuable for newer designers just learning the ropes of UI work.

Mobile Wireframes

Digital wireframing is a huge part of any interface project. The process of wireframing and even prototyping helps you map the interface with clarity before designing the colors, textures, and typography.

This mobile wireframe freebie is an excellent place to start. It’s built specifically for Sketch and comes with 57 different mobile interface screens you can pair together.

All of these screens include vector elements that you can also arrange to your liking. A really fantastic UI kit for pre-design work and basic prototyping.

But this library comes with a steep learning curve which can take weeks or months to understand. The best way to learn is to practice building stuff, but these free guides can help you learn a bit quicker and offer some structure to your React practice sessions.

Egghead

The Egghead website has tons of courses on many different JS libraries. Some of these courses have a mix of free and premium videos, but many are totally free which is great for newbie developers.

I recommend their React Fundamentals course which is free and spans 60 minutes over a few dozen videos. It’s definitely an intro course, but it’ll cover a lot of crucial subjects that you’ll have to learn to pick up React.

Egghead video quality is also exquisite so this is definitely a site to bookmark for other courses too.

React JS Crash Course (YouTube)

There are dozens of React.js video tutorials on YouTube so it’s tough knowing where to start. This React Crash Course video covers all the basics including MVC architecture and the very foundational structure of React.js applications.

This video is just over 1 hour long and it’s certainly not a complete guide, but I think it’s a solid introduction to the library if you have no prior experience and little-to-no idea what React even does.

FB React Docs

If you go searching for free React resources you’ll undoubtedly stumble onto the Facebook documentation.

These docs can be terse and difficult to work through initially, but the quality is great and the writing is aimed towards people who don’t know much (or anything) about React development.

I specifically recommend this tutorial. It’s a true guided tutorial rather than a documentation overview, but you should try reading through both since there’s a lot of knowledge you need to absorb.

To-Do App With React

All the tutorials on Scotch.io are phenomenal. The writing, the results, and the actual code quality equates to the best self-taught guides you’ll find online.

Out of all their guides I specifically recommend their simple to-do app since it guides you through a typical workflow and teaches common practices for building webapps.

But the Scotch React category has dozens of similar tutorials you can pick up and work through. Many of them target intermediate-level developers so as a complete newbie you may struggle. But Scotch gets into so much detail that it’s easily one of the best blogs to revisit for future lessons.

React Enlightenment

The open source React Enlightenment guide is one of the better sites to use throughout your journey. It’s terse but straight to the point. And since it’s open source the whole thing is free to read online or download locally.

Every page of this guide is hosted for free on GitHub and it covers a lot of best practices for new developers. You’ll learn about ES6 and JSX/templating along with basic DOM manipulation and components.

Just note this guide does not hold your hand or wait for you to keep up. You’ll need to do a lot of Googling to answer questions you have along the way. But this guide can take you pretty far and it’s frequently updated with new information.

TutsPlus React Tutorials

Every tutorial I find on the TutsPlus site is phenomenal. They publish incredibly detailed content solving very specific problems, and most of the time you can follow these guides in a step-by-step fashion which is handy for beginners.

The TutsPlus React category has dozens of tutorials ranging from the complete basics to more advanced app dev guides. For a newbie I recommend Getting Started With React. It offers a solid introduction to all the tooling & workflows that come along with a React.js environment.

React.js for Beginners (YouTube)

One other YouTube video tutorial I like is this one by Dev Tigris. It’s a complete guide for beginners and the teaching style is very clear.

This vid is only one hour long but it should get you comfortable with the basics of React. This video won’t make you fully independent or able to craft detailed apps from scratch. But you will walk away knowing how React functions and thinking in a more React-oriented manner.

Tip: check the related videos you see in the sidebar of this video. Many of those are also great and well worth your time.

React Fundamentals

The React Training site is yet another half-free and half-premium resource for learning React. And if you have time to go through the free content you’ll be pleasantly surprised.

This works like an online course series where you can study topics along with other students, and the best free course is React Fundamentals.

All the course material spans a total of 4+ hours long with a master list of 48 different lessons. The course gets updated frequently with new React techniques and best practices so it’s worth checking back every so often.

Codementor React Tutorials

The idea behind Codementor is pretty simple. You pair up with a digital mentor who helps you work through different projects and libraries. But these sessions usually cost money, so to help beginners without a budget, Codementor shares free written tutorials on their blog.

You can browse through all their React tuts and pick through any topics that interest you. Some cover basic React setup guides, others cover React Native for mobile apps, and others cover wacky ideas like a React Pokédex app.

It’s good to have a little background in React before following these tutorials. They get into so much detail that it can be hard for complete newbies, but I guarantee you’ll improve your skills just by following some of these guides.

Curated React/Redux Links

Lastly, I have to include this massive React.js links list because it really is the ultimate place to find React.js learning resources.

Developer Mark Erikson curated this huge list of tutorials & guides organized by skill level and subject matter. You’ll find plenty of beginner guides on React, ES6 and JS app design patterns.

Keep this bookmarked for later reference because as your skills improve you’ll find a lot of value in some of the more advanced tutorials.

These free resources are just my personal recommendations but the React community is constantly changing and awesome new tutorials are published every year. Take a look through these links to see if any can help you get started, but if you’re looking for more alternatives definitely hit Google and see what else you can find.

It helps if you have some good reading material to keep you on the forefront of UX changes.

These blogs are by far the best places to start with frequent posts on UX design for websites, mobile apps, and general digital interfaces.

1. UX Booth

UX Booth has been online for years and they’re probably the most well-known UX blog on the web.

Each week they publish a few articles related to user experience and general design topics. It’s really a mixed bag of content but the quality is superb. Most of these topics are really groundbreaking so they talk about many ideas you won’t find on other blogs.

I highly recommend UX Booth as a must-read blog. It should be in your rotation if you do any type of design work.

2. Usability Geek

Here’s another great blog on the topic of general user experience and usability.

On Usability Geek you’ll find plenty of articles covering trends and design techniques for the web. There’s also a solid focus on mobile apps too along with workflows for larger teams like agile.

Usability Geek feels more like a general UI/UX and interaction design blog. It covers a little bit of everything, and there’s something here for everyone regardless of your background.

A fantastic read for new and seasoned designers alike.

3. UX Movement

If you look over the homepage you’ll notice UX Movement doesn’t update very often.

But when they do every post is fantastic.

This website is the cornerstone of new ideas for UX on the web and mobile. I’m always surprised at how insightful and valuable these articles can be, especially ones that offer results from case studies.

UX Movement’s biggest downside is the slow trickle of content. You’ll be lucky to get 1-2 posts every month.

So you probably won’t bother visiting this site weekly, but it should be on your radar. And if you’re looking to delve into the belly of UX design then try browsing through their archives to see what you can find.

4. InVision Blog

InVision has turned into a massive company with their online prototyping & workflow tools.

During that time they also launched the InVision Blog which has some pretty great design articles mixed with some general lifestyle posts. Granted these are all interesting pieces and they’ll be especially relevant to designers.

But the UX-specific posts don’t come every day so you may have to browse through to find something you like.

The reason I like this blog is mostly their volume and quality of content. It’s truly a great read for anyone in the design space.

5. VWO Blog

Another company blog I really like is Visual Website Optimizer.

On their VWO Blog you can search through case studies and opinion pieces discussing the state of user experience and split testing. Many of their case studies get mentioned on other design blogs since the content is original and invaluable to the design process.

You’ll also find topics on conversion rate optimization and tips to improve your landing page designs for specific KPIs like email signups or selling new subscriptions.

VWO is a trusted brand, and their blog exudes the same level of trust you’d expect from their tools.

6. Smashing Magazine UX

Speaking of trusted brands, Smashing Magazine is probably the definitive design blog on the web. It’s been around for well over a decade and they’re still publishing great stuff.

I specifically recommend the Smashing Magazine UX section which just publishes content on user experience design.

Many top-tier designers from all over the world write for Smashing Magazine, so there’s a ton of opportunity to learn cool stuff. You’ll find articles on pretty much everything, but there’s a specific slant towards UX for web design.

If you’ve never read Smashing Magazine before then now’s your chance to delve into a gem of the design publishing space.

7. UXmatters

I’ve seen a lot of variety on UXmatters and it seems like one part blog, one part community and one part Q&A topics.

The site feels a bit strange because it’s not designed exactly like a typical blog. They do have columns you can read on certain topics with plenty of opinion pieces and case studies.

There’s also a list of top articles where some of them are pulled from print publications.

You may find that some of their best articles date back 5+ years and they still hold up even today. That’s some great writing and proof that good UX is ultimately timeless.

8. UX Design Collective

The UX Design Collective is not a totally unique publication. It’s a mix of unique content along with curated stories published on other sources and re-published on their site.

But most of those articles are obscure and tough to find since they often get shared on Medium or another blogging platform.

That’s what makes UX Design Collection so valuable. It’s a one-stop shop for everything you’d want to read about in the big world of user experience.

I specifically recommend signing up for their newsletter to get their recommendations for top UI/UX articles. It’s the best way to find out about new blogs and new designers writing about these topics.

9. UXstudio Blog

The UXstudio team has their own blog focused solely on user experience work. This is a great read and full of interesting ideas for future tech, team building exercises, and handling client projects with a focus on UX.

You’ll also find plenty of case studies mixed in which are really fun to read through.

You can learn a lot from skimming case studies just to see how other design teams handle their work. Check out their blog and see if you like the content. It may not be for everyone but it covers a lot of ground.

10. Nielsen Norman Group

The NN Group is perhaps the most well-respected usability research team in the industry.

They frequently publish articles detailing their findings in various case studies and usability studies. Many of these are high-level ideas, and they’re perfect for semi-experienced designers who want to push their skills even higher.

If you’re brand new to UX design then Nielsen Norman may be tough to read.

But the more you practice in the field, the more their articles will make sense and even get you excited to sit down and read.

1. Captain Icon

My personal favorite web font is the Captain Icon pack created by designer Mario del Valle. It’s a totally free open source project hosted on GitHub with vector files and web fonts.

What I like most about this icon pack is the style. Each icon has a very unique design, and they’re all hand drawn from scratch. This makes them stand out far above the other more generic icon sets.

But I don’t think Captain Icon works for every project. It’s best used on creative sites where a hand-drawn style fits with the layout.

2. Octicons

GitHub recently open sourced their own icon pack called Octicons. This free icon set is currently in version 5.0 and includes dozens of icons with some basic symbols.

These icons can be found scattered throughout the GitHub website. But they’re just simple enough that they can work on pretty much any interface.

If you need a simple, lightweight icon font then Octicons won’t let you down.

3. Typicons

With rounded corners and simpler outlines, the Typicons set is perfect for any site. It comes with 330+ unique icons all with a similar style.

The pack is completely free and also available on GitHub. This means you can include the icons directly into your site and even make edits to them as needed.

Few people know about Typicons but it’s one of the better icon web fonts available. They can even work for iOS with some minor adjustments and special code snippets.

4. Zondicons

Zondicons are totally free and real easy to add into your site. Unfortunately these aren’t hosted on GitHub so they don’t have an update archive.

But you can see all of the examples on the demo page including which CSS classes you need to get them working properly. The main Zondicons download link comes right from the website, so it’s hard to tell if they’ve ever been updated or if new icons were added.

I do recommend this webfont if you’re okay with simpler designs. This makes the icons far easier to use, but they can also blend into the site with a more “generic” style.

5. Entypo

The webfont icon family Entypo has been around for quite a few years. These icons are superb and they’re top of the line when it comes to freebies.

New icons are added sporadically and they’re very simple to access. The fonts also split into two packs: the main pack and the social pack. So if you don’t need social media icons you can reduce the font file size by quite a bit.

Entypo comes with over 400 icons and a brilliant CC sharealike license. To learn more about installation and customizing the icons you should read through the FAQ page and visit the main GitHub repo.

6. MFG Labs

One of the newer fonts in this list comes from MFG Labs with their own icon set. It’s completely free and hosted on GitHub for the world to access.

Each icon comes packed with standard webfont formats using Unicode PUAs in CSS. This is fully semantic in all browsers and helps to reduce clashes against other CSS code.

MFG Labs icons have a unique style that stands out from the herd. I absolutely recommend this icon font for any type of website, commercial or otherwise.

7. Ionicons

Native devs love the Ionic Framework and it’s one of the most popular choices for web-to-mobile apps. The Ionic team decided to release their icons as a webfont called Ionicons.

Naturally they’re totally free and available on GitHub. You can even add these icons directly to your site using the CDN version of the stylesheet.

I mostly recommend Ionicons for newbies who haven’t used icon fonts before. They’re super easy to setup, and once you understand how they work you can move onto pretty much any other icon webfont out there.

8. Font Awesome

The original web font and Bootstrap’s personal choice, Font Awesome is perhaps the definitive pick for most web designers.

Font Awesome has been around for years and it’s widely regarded as the first major open source icon font. It frequently gets new updates with fresh icons and currently it’s in v4.7 with a free download on GitHub.

Every icon is fully scalable and maintainable directly in CSS. You can change colors, shadows, background gradients, or pretty much anything else using pure CSS3.

This is by far one of the safest icon sets you can use and you know it’s going be here for the long haul.

9. Material Design Icons

Google’s material design brought a new approach to UI/UX on the web. This led to many new frameworks & resources including this material design icon font.

These material icons are totally free and accessible on GitHub. This icon pack is absolutely massive with over 1,000 icons covering a wide array of interface features.

And because it’s open source you’re free to reuse these on any projects and even customize the icons if needed. Perfect for anyone working with Google’s material guidelines on the web.

10. Devicons

The Devicons pack is one of the newer web fonts you can try with a focus on tech logos & branding.

This icon font has every logo you can think of from the big tech players like Google to newer CMS logos like Ghost. I’ll admit, this is only useful for sites that want vector tech logos which certainly won’t be a majority.

But it’s a hefty icon set and it’s totally free! You’ll find install details on this page with a free CDN version you can use to reduce load times.

Wrapping Up

It’s hard picking just ten icon fonts because so many new ones are released every year. But these are my top picks and if you recommend any others be sure to share in the comments below.

These websites curate icons based on license (Creative Commons or premium/commercial). Below I’ve curated a nice list for anyone who wants to quickly find specific CC icons on the web.

Iconfinder

If you spend any time searching for icons, then you’re bound to stumble upon Iconfinder. This is the premier destination for any icon you could ever need.

It operates like a search engine, where you type in an icon style or glyph (like “magnifying glass” for a search icon). You’ll then see results with a mix of commercial and free options.

But if you look deeper into the search settings, you can filter the results to view just free or just paid options. You can also set the icon sizes and a few other search criteria.

No doubt that Iconfinder is the best place to start if you’re looking for free icons. If the icon is out there online, Iconfinder has it indexed.

All the Icons, Fonts, Web Templates & Design Assets You Could Ask For

DOWNLOAD NOW

Noun Project

On the Noun Project website you’ll find a curated list of over one million icons and counting.

This site also works like a search engine, where you can filter icons based on keywords, styles and glyph shapes. For example, you can search for a mail icon and find some pretty clean results.

But The Noun Project isn’t completely free. They do have an optional pro plan which gives you access to far more icons.

Thankfully, their free icon library is still large enough to be worth a bookmark.

FindIcons

FindIcons is an icon-only search engine and it features one sweet interface.

As you start typing you’ll notice auto-populated search results based on existing tags. This can help you find exactly what you’re looking for very quickly.

There’s also a filter menu on the side that lets you select how many icons to display per page, icon colors, styles and license.

This one is definitely worth saving if you need a high-quality search engine exclusively for finding icons.

Flaticon

There’s a lot to say about the flat design trend sweeping the industry. One sure thing is that if you’re creating flat websites, you’ll have no problem finding resources.

The Flaticon website is one such example.

This is a free icon search engine dedicated to flat icon styles. You’ll only find flat icons here and they’re all pulled from open source icon packs submitted by the community.

One cool feature is that they offer icons in many different formats – including base64. You can use base64 code within CSS to embed icons into your page without ever saving an image file.

Flaticon is certainly the best place to look for icons if you work with flat design on a regular basis.

Google Images (CC search)

A lot of people skip Google Images on their quest for design assets. Typically, that’s because the results in Google Images come from other websites and you never really know what kind of license they’re using.

But there’s a nifty feature in Google Images that few people know about.

If you click “Tools” and then click “Usage Rights” you can select from one of many Creative Commons licenses to search through.

This automatically limits your image searches to return only images with the correct usage rights. Pretty cool!

Alternatively, there is a CC search page which can return similar results. But there’s no way CC’s internal search can ever match the power of Google.

Fontello

I can’t say that Fontello is really a search engine just for icons. But it is one amazing website to help you find free Creative Commons assets – with plenty of icons to go around.

It’s described as an “icon fonts generator” and can be used to create custom icon font files to embed via CSS.

Note that you can also download these icons as vectors and rework them to suit your needs.

While it’s not the largest icon library in existence, it certainly features a variety of quality icons for designers.

Iconmonstr

Iconmonstr is relatively new compared to the other sites I’ve mentioned. However, this is a fantastic icon repository full of 100% free open source icons.

As of this writing it features over 4,000 icons – all organized into different collections. They’ll help you search for icons based on topics like sports, business or healthcare.

There’s also a standard search field if you know exactly what you’re looking for.

Just note that Iconmonstr primarily organizes single line icons with a similar minimalist style. So it’s great for finding icons with that particular style, but won’t help for much else.

GitHub

It may seem weird to recommend a code repository as a resource for graphics. But GitHub really does have a lot of repos with free icons available as SVGs and PNGs – among other formats.

Just do a search for icons and you’ll see what I mean.

Granted, there will be plenty of scripts and templates built around icons that show up in the search results. But you’ll also find repos for open source icon libraries that designers chose to host and release through GitHub’s free platform.

Consider this a last resort for finding obscure and niche icons. Don’t expect miracles, but the few gems you find can really have an impact on your design projects.

1. Montserrat

The first in my collection is Montserrat. This font can work for pretty much anything but I think it works incredibly well as header text.

I’ve used this for navigation text with all caps, customized letter spacing, along with many different font styles from thin to super thick. Montserrat fits the bill perfectly across the board and it’s one of the more universal fonts blending into anything from a tech blog to a funeral parlor website.

The font only weighs about 500 bytes using the default style so it’s incredibly light. And with so many different styles you can get a lot of different looks from this one family.

If you’re looking for a unique heading font try Montserrat. It probably won’t work for everyone but it’s a safe starting font that many designers love.

2. Merriweather

A much thicker serif alternative is Merriweather which I also like as a body font. This versatile typeface really looks great anywhere on your site and it’ll bring plenty of attention to your headers.

If you try Merriweather for a larger page heading I suggest using the bold or bold italic style. They are surprisingly clean but they probably need some letter spacing adjustments. Either way the style and darkness of the letters are super easy to follow.

When pairing this font I usually do a sans-serif body typeface. The contrasting styles create a natural divide between headers & body copy. Plus most people find sans-serif easier to read on average for body content.

But I see a lot of sites with serif headers and they all look great. Merriweather is a nice starting point for serif, but if you don’t like it you’ll find tons of alternatives in this post.

3. Josefin Sans

Modern and classy best describes Josefin Sans. It feels like a font straight from a 1950s jazz lounge, or maybe something you’d see on the front page of The New Yorker.

It does have a distinct curvy style and the thin letters save a lot of horizontal space. You can toy with all-caps or different letter spacings to create many unique styles all from this one font family.

Some sites just look better with thin heading fonts. If you’re looking for one to try I absolutely recommend Josefin Sans with its unique letter designs and its many bold/italic styles.

4. Arvo

One other serif font I really like is Arvo. This font has a lot of character which you’ll notice right away in the bolder styles.

I really feel like Arvo works best on blogs and digital magazines because the font grabs so much focus. It’s one of the strongest fonts in this list and the serif design grabs even more attention.

If you’re launching a magazine-style blog then Arvo can work well as a strong header. But if your blog works better with sans-serif fonts this can be too much. One alternative that’s a bit more subtle is Crete Round but it doesn’t have the same eye-catching appeal as Arvo.

5. Raleway

I’ve seen Raleway on many larger blogs and online magazines for its distinct style and large variety of font variations.

For big heading text I think a mid-level thickness works best so the letters don’t get too wide. Default letter spacing is great so every word is clearly legible.

One feature unique to Raleway is the “w” letter form. It crosses in the middle which looks like two “v”s stacked together. Some may like this, others won’t. But it’s definitely unique to Raleway so it’ll stand out in your page headers too.

6. Catamaran

One of the newer fonts I found recently is Catamaran. It comes with 9 font styles from thin to black and varying thicknesses inbetween.

What I like most about this font is the offbeat lettering. Each letter takes on a very unique style and you can see this in the bolder styles. When used in heading text these letters really shine and jump off the page.

Because the bold styles are so thick you should only use Catamaran in headers with larger font sizes. It can look OK at all sizes but Catamaran really feels like a thick header typeface.

7. PT Sans

PT Sans is soft with smooth edges and thin letters. For headers I only like the bold style of PT Sans because the “normal” style just feels way too thin.

I also prefer PT Sans for headers only since it just feels too soft for regular body text. But any PT Sans header is going to look amazingly clean and readable. This font actually has a sister named PT Serif that also works well.

Between the two, I personally prefer PT Sans. It has smoother edges than the serif version and I feel it just works better in page headings and especially for blogs.

8. Open Sans

Open Sans is small, versatile, and super clean. It deserves a spot in this collection because it’s a simple font and one of the fastest loading fonts from the entire Google Fonts library.

The majority of sans-serif fonts play well with any site. Plus you can use sans-serif fonts in both your header and body text making Open Sans a reasonable choice for the entire website. One alternative I really like is Muli which has a lot more character as a header font.

But Muli’s downside is the larger file size. Ultimately this is what makes Open Sans so great because slower sites don’t rank as well and they provide a worse UX all around.

9. Roboto Slab

For a strong serif header font you might try Roboto Slab and just see how it looks. The letters aren’t too thick and the tags that hang off don’t distract the reader.

I generally prefer Roboto Slab for header fonts instead of the sans-serif version called Roboto. The serif version just feels stronger and leaves a much bigger impression on the viewer.

Truth be told they’re both awesome and you can’t go wrong either way. They both support all the common unicode characters and they’re both amazing choices for your website headings.

10. Ubuntu

The free Ubuntu font can be used for practically anything from nav text to large headers and even body copy. It’s extremely versatile and it’s lightweight with a pretty fast load time.

Rounded edges on the letters make this feel sleek and modern. It’s also one of the few fonts that really can be used in multiple places on your site which can cut down the total number of fonts you need.

Ubuntu was designed back in 2010 so it’s been around for quite a while. Now that webfonts are much more common the Ubuntu family is widely used in web design.

Wrapping Up

Whenever I design a new site these 10 header fonts are my go-to choices for headers. They’re much better than the stock OS defaults and your layout will really stand out from the others with these strong header fonts.

I’m hoping this article will set you on the right path with a collection of the 12 best UX accounts on Instagram. These are all very active and perfect for anyone breaking into the field, or looking to expand their reach with more Instagram inspiration.

1. @ux_ui_wireframes

My absolute favorite account is @ux_ui_wireframes and it’s been around for years now.

New posts are frequently added, and many of them are sourced from designer accounts through hashtags. So this works like a curation resource where the account owner connects with other designers and asks if they can republish the photo on their account.

Naturally this draws more attention to the designer’s work and gives you a bunch of diverse UX inspiration. Cool stuff!

2. @uxdesignmastery

Here’s another one I really like that’s pushing just about 100k followers.

The @uxdesignmastery account comes from the main website offering tutorials and courses on this topic. So their photos are meant to guide you towards the site and increase users while offering some cool inspiration.

New UX designers will find this incredibly valuable since the website is chock full of knowledge. But even if you just follow the Instagram account you can still learn a lot from their uploads.

3. @wireflow

The team at @wireflow have their own Instagram account for publishing custom wireframes, prototypes, and storyboards for user flows.

Again this is managed by the main site which promotes their tool for simple flowchart management. It’s actually a great tool because you can use it freely on the web and the results are instantaneous in your browser.

But their Instagram account goes beyond digital work to include a lot of hand-drawn wireframes and user flows. Excellent for people who prefer classic methods of brainstorming.

4. @uxpiration

With a following of 12k designers and growing fast, one of my favorite newer accounts is @uxpiration.

It’s built solely to promote designers and help get work out there for ideas. This account almost takes on a communal feel giving back to the overall design community.

Well worth following if you want UX, UI, or general design inspiration.

5. @uxdesigns

Looking for animated interface designs? Then you’ll want to follow the @uxdesigns Instagram page.

A lot of these photos are pulled from Dribbble where designers share UX animations and custom interfaces. They’re all tagged properly so you can usually find the original designer pretty quickly.

But this is one feature I like about Instagram’s support for GIFs, and it shows just how useful this account is.

6. @humble_ux

For a good mix of digital and traditional, check out @humble_ux.

It has almost 20,000 followers and over 150 posts with many new ones added every week. The photos come from the Humble UX team who curate shots from around the web and share a few of their own too.

Most designs are sketches or brainstorms on a whiteboard, so you’ll see a lot of traditional mediums. This is great for all types of UX from mobile to websites and even desktop apps too.

7. @uiuxgifs

Here’s a premiere animation UX account that everyone should know about.

@uiuxgifs only publishes animated designs that feature logos, icons, or interfaces in motion. It’s a fairly large account with over 50,000 followers and they update constantly.

But the thing to note is that they publish a lot more than just interfaces. Many of their posts do center around logos and icons that animate separate from any interface, so this may not be as relevant to strict UX designers.

8. @uitrends

On the flip side here’s an account that only focuses on interfaces. The @uitrends Instagram is full of custom designs and even redesigns from popular websites.

Many of these are sourced from Dribbble so they all have that Dribbblification look to them.

But there are some gems mixed in, and you can find a lot of quality inspiration on this page. Plus they frequently update so it’s an excellent resource to browse for design ideas.

9. @interaction_design_foundation

The Interaction Design Foundation offers lessons and courses in UX design along with free articles for beginners. It’s a massive resource with a ton of great learning materials on the topic of user experience.

So naturally they have an Instagram account and it’s got a lot of posts in there.

As of this writing it totals over 1,330 posts and has just above 16,000 followers. This is one of the few Instagram accounts that mixes UX inspiration along with photos featuring tips, advice, infographics, statistics, and quotes from UX designers.

I definitely recommend this account for adding some variety to your feed.

10. @Uidesignpatterns

@Uidesignpatterns is quite possibly the largest Instagram account on design work.

It totals a massive 167,000 followers with only about 600 posts. These posts come from designers from all over the world, and you can even tag your content on Instagram to have them feature your work.

Each post includes a mention to the designer so you can browse around and find people who may inspire your work. Plus this account is really made for designers, and you can tell by some of the humorous posts they do.

11. @instaui

Last but certainly not least is @instaui. This one’s also pretty large with over 50k followers and new posts every day or so.

One thing to note is that despite their username they don’t always post UI designs. There are lots of digital illustrations, vector icons, logo designs, and general graphic design pieces.

But this is still a really cool Instagram account if you’re looking for general design ideas and want to follow active accounts that update on the regular.

And if you want to try finding even more accounts, check out the #uxdesign hashtag. If you dig deep enough, you’re bound to find more profiles worth following.

1. Flowers SVG

One of the hottest animation trends on the web is SVG animation. It’s a growing topic of interest and this flower logo animation is a great example of SVG in action.

The icon & text of the logo has been created inside an <svg> tag in the HTML markup. Then sequential animations are controlled through CSS and automated on pageload. This requires a number of SVG-specific CSS properties like stroke-dashoffset which pushes outline motions in sequence to create this brilliant animated effect.

2. Carbon LDP

The Carbon LDP logo is fairly detailed and complex. But developer David McFeders took this to another level with his animated Carbon logo built on CSS/Compass.

Every piece of this code is easy to customize from the logo size to the animation speed. It’s built in pure CSS and made to loop endlessly. And even though the letters are made of a single PNG image you can always reverse-engineer that design with your own custom fonts.

3. Binary Lab

Binary Lab’s animated logo is one of the more complex animation effects in this list. It pulls numbers from a flask and fades them in & out of view above the logo.

The animation itself is controlled through CSS. But this pen also relies on the TweenMax library for adding repeating digits and custom alpha transitions. All-in-all a very creative use of CSS and JavaScript for modern web animation.

4. Pure CSS3 Stack Overflow

The Stack Overflow logo is one of my favorites because it’s simple, yet recognizable. And this snippet animates the Stack logo icon using nothing but pure CSS3.

This is by far one of the most impressive pure CSS animations I’ve seen. The final output really does look like the official logo and the animation feels smooth in every major browser. Anyone who loves pure CSS/SCSS animation will adore this snippet.

5. Monster Energy Logos

Tim Pietrusky animated this series of Monster Energy logos using SVGs and well-spaced CSS transitions. His code is free to study and replicate on your own if you want a similar fading effect on logos.

All of the animation timing is controlled directly through Sass which makes this a pure CSS animation. But you can alter variables to change the speed, fade colors, or pretty much anything else.

6. Subvisual

The team at Subvisual has a highly unique logo which was animated by Miguel Palhas. It works on two factors: the logo text and the “S” icon.

Everything is built on SVG elements which makes manipulation a bit easier. This pen also relies on the TweenLite library for JavaScript, although the vast majority of the animation is done via CSS. It’s a neat effect that can be repeated or triggered based on user action (hover, click, etc).

7. Pixel Logo Animation

Using the free pixel font Jura allows any developer to create a custom pixel-by-pixel animation effect. And that’s exactly what CodePen user Khaosmuhaha did in this pen.

It uses plain text manipulated through an HTML canvas element. The animations are powered by CSS3 animation properties, but they’re controlled through jQuery which makes the sequential pixel animation possible.

Definitely a cool effect and a fun use of the canvas element combined with a webfont.

8. Alex Aloia Logo

If you’re looking for a real complex logo animation then check out this example created by developer Alex Aloia. Using his name as the brand he created a complex series of SVG shapes which animate using a “drawing” effect.

The entire effect isn’t possible with only CSS. It requires a number of JS transformation libraries like DrawSVG and the more popular D3.js. But it’s a fun way to use open source libraries to create this one-of-a-kind animation.

9. Bayleys

The Bayleys logo is an obscure choice for animation. But it does have strong solid edges which makes re-creating the logo easy as pie.

That’s where Rafael Contreras comes in with his animation snippet using just 38 lines of code. The logo itself is built using SVG tags and the animation manipulates these tags accordingly. Many logo elements move in different directions making this effect mesmerizing to watch.

10. Nintendo Switch

The newest gaming console from the minds of Nintendo comes with a brilliant logo animation. This can be seen in all of their commercials and in this pen created by Koto Furumiya.

Koto re-built the Nintendo Switch logo using SVGs while animating the entire thing with CSS. And would you believe this animation only requires ~50 lines of CSS?

One thing I have to praise about this logo animation is the authenticity. It genuinely matches with Nintendo’s animation from the forceful push down and the rebound/bounce back up.

Wrapping Up

All of these examples are free and open source to study, clone, and manipulate for your own projects. I hope you like these demos and if you’re looking for more examples of CSS animation, take a look at this collection to see what other people have made.