Discover the best icon websites created by professional designers. Get inspired and start planning your perfect icon web design today!

Finsweet

We love lottie animations! We built lottieflow.com to prove it!

Lottieflow.com Hero

Alex Tokmakchiev

I built this page for Sofia Game Jam 2019 to showcase the best games made in the past 5 editions of SGJ. 

This year, our whole aesthetic is built around vaporwave and synthwave, so I thought it'd be cool to bring in a little extra nostalgia by recreating a Windows 95 desktop full of dope-looking game icons.

Just for the heck of it I also added some additional stuff like:
• A semi-functioning Start Menu
• A Recycle Bin
• A screensaver

And a bunch of other stuff you can click around to find out. :P

P.S. It ain't responsive. I could have made it, but I thought "Hey, Win95 never supported mobile devices". :P

(Win95) Best of Sofia Game Jam

Anthony Barbarich

Website for a fresh srtatup based in Belgium. They make innovative Solar Home Systems for rural households in Sub-Saharan Africa.

Solarly - Be Smart, Be Solar.

WebDev For You

Welcome to Daily Interaction #127.

This demo showcases a category card animation on hover.

With this effect a circle scales up to fill the entire card with a color, and the inner circle, and circle border become white. The text also becomes white to be more readable on the background color.

The effect was achieved by placing an inner circle, circle border, and icon within a circle wrapper. Then with interactions I have the circle scale up, and the border and background circle change color on hover. Each card has a separate mouse out interaction so that it can revert to the individual color of the specific card.

Inspired by: https://codepen.io/jorgesanes10/pen/QdMEXr

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #127

Egenix - Professional Webflow Development Agency

This free cloneable is great for quickly using all common social media icons assets and social buttons for your next Webflow project! Just copy and paste any section that is most appropriate for your project.

-> Copy paste to your Webflow project
-> Add custom animations 
-> Modify the size of the classes 
-> Create separate assets for social sharing icons
-> Save time on your work!

Free Social Media Sharing Links

Jonas Arleth

For the trick to work, you need to paste the custom CSS code from the embed field into your project. The arrow icon can be replaced by your own SVG image in the CSS code. After that, you may need to adjust the spacing and sizes in the CSS code. If you use em for the sizes, the icon will automatically adjust when you use a larger font size.

Automatically add an arrow icon to every external link in your Webflow project

Digidop Agence Webflow

(EN) Hello Webflow community! Here is a new clonable from Digidop. This one allows you to copy and paste the HTML code of +100 SVG logos. The filtering system allows you to choose between the original version or a custom version to change the color of your logo. You just have to insert the code in an embed in your project!

(FR) Bonjour la communauté Webflow ! Voici un nouveau clonable de la part de Digidop. Celui-ci vous permet de copier-coller le code HTML de +100 logos SVG. Le système de filtrage vous permet de choisir entre la version original ou une version personnalisée pour modifier la couleur de votre logo. Vous n'avez plus qu'à insérer le code dans un embed dans votre projet !

Library 100+ Embed Code Logo SVG

Mikhail Voloshin

Hi there! Here is animated subscribe form. Feel free to follow me and leave your feedback!

99ui#7 Subscribe form

Start a project by yourself or with a team, now let's build daily interaction #13!

This demo showcases circular icons with a hover effect.

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev For You - Daily Interaction #13

Practicing shadows. Nothing fancy, saw this and wanted to try replicating in using Webflow. 
I hope you find it some use. 
--
NOTE

I did this just as a personal test, please keep that in mind if you are using it for your own project (meaning, if something is not working or is not the best way to do it don't send your hate over here :)) )
Original Inspiration: https://codepen.io/yuhomyan/pen/abdRKrM
--

Enjoy!

Social Bar

Master Flowmaker

Hover, Open/Close Nav Button

035 - 100 days of @webflow interactions

#35 Hover, Opne/Close Nav Icon

Team Nocoloco

I always wanted to explore some components that aren't natively possible with Webflow or require bit more workaround. 

So, exploring this as part of #noco30d challenge by Nocoloco. Here's my Day 1 work — an Icon-based Tabs component. Suitable for presenting categories of information in a limited space.

UPDATE (Jan '21): The component has been completely rebuilt it to be much simpler and fully responsive, still using Webflow's tab component. 🤩

- Arjun (@arjunphlox)

Componento-001: Icon-Tabs (Updated Jan '21)

Nigel Payne

A bangin' website for a full-service production and creative services company specialising in photography and film content creation.

Adding new content for the following is a breeze with the Webflow CMS:
– Services
– Case studies
– Client logos
– Reviews

Services provided:
– Strategy and wireframing
– Bespoke design and icons
– Webflow development
– Custom coded solutions for video and cursors

Bangerz & Nash

A simple social media hover interaction inspired by: https://www.ivantoma.com/

Social Media Icons: https://simpleicons.org/
Background: https://bgjar.com/

WebDev For You - Interaction #148

Happy Monday! Welcome to daily interaction #91.

I saw these animated icons on a website and just had to re-create in Webflow! They're very simple line icons with subtle animations, but I think they're very effective. One thing to note with the shapes that change size is that I used the 'size' animation rather than 'scale,' as scaling adjusts the width of the lines ever so slightly, and doesn't make the animation as precise. Size and move were the only two animations used for these shapes :). The only easing used was 'Ease,' and all the movements have a duration of .5 seconds.

Inspired by this website here: https://versett.com/

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev For You - Daily Interaction #91

Duncan Hamra

Happy Monday! Kicking off this week with a complete pricing template inspired by Autopilot's old pricing page. I enjoyed their use of colorful icons, pictures of actual people, and beautiful fonts. 

Click one of the buttons to see how it works with Memberstack. 

This template is free to use on any project, but you'll need to remove the Memberstack data attributes from the signup and select buttons. 

If you have any questions or need any help feel free to reach out in the comments. Thanks!

Responsive Pricing Page

Ben Parker

Project to clone to answer this question on the forum:

https://forum.webflow.com/t/tab-bars-aligned-on-the-right-with-icons-and-extendable-text/61593

tabs-on-right-with-icons

Ivan Badia

Header services infinity cycle using a 3D forward rotation. Social media icons with reverse hover states.

Discover icon websites built by the Webflow community

Discover icon websites built by the Webflow community