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

Fonzrelli - electric motorbikes and scooters! 

At Fonzarelli, we’re on a mission to increase the uptake of electrifying two-wheel machines. Lightning acceleration. Zero emission. We’ve built a range of rides to suit any rider, whether you’re looking for an easy commute or an adrenalin rush, we now have the bike for you. We are Australian riders, innovators and builders. Join our Fonz family. Join the future.

FONZ

Fonzarelli

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 link

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

Just replace the image in your Webflow designer in the correct format. The device is vector-based and sharp at any size. The screen image will adjust to the device on a percentage basis.

Pro tip: the best way is to make the iPhone a Webflow symbol (component) so you can easily replace the image via the element settings.

Tutorial: https://youtu.be/YBRo3DKLVoI

iPhone & iPad Pro Mockups (Free Cloneable)

iPhone & iPad Pro Mockups (Free Cloneables)

SiteFlow - the no-code way to build sitemaps. A simple symbol-powered cloneable that allows you to easily build beautiful sitemaps within Webflow! 🔥

With SiteFlow, building a simple landing page sitemap takes less than 5 minutes!

Wow your clients, host them sitemaps on your own subdomain, choose from three beautiful and professional templates! 🚀

Feel free to ask any questions below or shoot me a DM/email!

We hope this is useful! Enjoy :)

SiteFlow

[Cloneable] SiteFlow - Visual Sitemap Builder

Webflow lets us override symbol content, but we're stuck with styling...

Here is a workaround I've been using until we can officially override symbol styling. 

This hack is handy if you want to toggle between a few "modes" or "themes" without having to maintain multiple symbols.

How it works:
It involves linking a hidden text block to an override field to specify a combo class. Custom code is used to apply the defined combo class to the symbol relative to the trigger. You're able to override styles for the trigger parent, sibling or all children elements. This hack works for any number of symbols on a page. 

Current limitations:
Only works on published site
Tiny flicker until javascript loads

Symbol Style Override

Override Symbol Styles [Hack]

Triptych design website to illustrate the stages of stress. Based on a Webflow site built on interactions 1.0 https://geospace.webflow.io/#03. This was also a challenge given by the Pixel Geek on one of his live streams. I think it is really useful. You can built on top or below it. Also, all the content comes from symbols and can be edited on the content page.

Triptych1

triptych1

Netguru S.A.

Hidden Heroes is a digital collection of stories about the people behind modern software and design. The publications within the website are a tribute to innovators who set the foundations on which we build vital solutions for the modern world. Their inventions make the world run, but their stories remain hidden. Until now. Hidden Heroes uncovers unexpected connections between great human stories and technologies and ideas that are widespread public phenomena today.

Hidden-heroes

Hidden Heroes

Checkout my new cloneable project. This design was taken from www.FrontendMentor.io and I built it to practice using Finsweet's new Client-First naming system.

Features 4 pages, some small interactions sprinkled throughout, a custom built price toggle, and a CMS collection.

The provided design didn't include the actual individual "Stories" template design, so the collection doesn't link to anywhere. I challenge you to take a stab at designing the CMS template page and share it with me. I want to see what you come up with!

Photo Snap

photo-snap

The homepage for Once Collective's new website, for which I lead the UX and development.

Alex, the director of Once, came to me with an unusual site concept; his vision for Once is multi-faceted, utopian and based around the 5 symbols. Each symbol is related to several words/ideas, and (unlike a regular website) Alex wanted users to look around and find info, rather than being handed everything off the bat.

This is the resulting site (homepage only - final will have pages linked to symbols); I made use of the interactions panel to create an experience in which the user makes sense of the symbols and words as they look around -moving their cursor or scrolling on mobile.

Once Collective Homepage

once-collective-homepage

The new :has() selector is very cool. We can use it to modify the style of symbols in Webflow using override fields.

Here we're using a link override field in a symbol to change a symbol's styling from light to dark. 

Take a look at the cloneable or the linked blog post to read more.

NB - support for the :has() selector is limited to Safari and Chrome Beta at this point, so it's not quite ready for live sites!

Discover symbols websites built by the Webflow community

Discover symbols websites built by the Webflow community