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

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)

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

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

Caleb Raney

An example of how you can use visibility overrides and custom CSS to create more flexible components in Webflow.
I wrote a blog post explaining it in depth on my website:
https://www.calebraney.com/post/how-to-make-more-flexible-and-complex-components-in-webflow

Complex Components

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!

Modifying symbols with the :has() selector

Modifying the styles of symbols with the :has() selector

The dashboard prototype is a Webflow-based CRM tool for partner list management, with note-taking capabilities. It utilizes components and symbols for a user-friendly experience Webflow Devlink. Additionally, it's connected via Devlink to a server with React JS, providing advanced functionality and seamless integration. With a clean and modern design, users can easily add, view, edit, or delete partners and write personal notes to keep track of important information. This versatile tool is ideal for any business looking to manage their partner list more efficiently.

Dashboarder

Devlink Project — Dashboarder

Agni Elevators performs a full range of works related to the design, supply, installation and maintenance of elevator and escalator equipment.

The client contacted us with the task of redesigning the site and SEO optimization. We have coped with the task and continue to cooperate with the client within the framework of technical support.

Agni Elevators

DEVL is a development studio. The team deals with web and mobile applications.

The client turned to Atman with the task of developing a corporate website of the company. We launched a website on Webflow and continued to work together as part of technical support.

The client had a brandbook consisting of a logo and corporate colors. We have expanded the brandbook: added abstractions and animations.

A feature of the site is the concept of a single screen. Most pages on a PC are built in such a way that the user does not need to scroll the page.

DEVL

A platform for cross-industry interaction of inventors, industrial companies and investors for the joint development of future technologies.

in-hub.ru

The Carsale platform is an innovative technology-based car sale and purchase business where all transactions are made online from anywhere in the country. At the same time, the buyer receives complete information about the car, and the seller is spared from repeated and tedious displays and negotiations.

The client turned to Atman with the task of developing a design and layout of a multilingual website based on ready-made text content and a logo. We coped with the work in a month and met the deadline on the client's side.

A feature of the project was a large number of tables. We were able to implement them conveniently for the user: the table header is fixed when scrolling on a PC. 

On mobile, we decided to keep the horizontal scroll, but supplemented it with an animated hint.

CarSale

51 is a full–service agency with a strong focus on trade marketing. The client turned to Atman with the task of developing a bright digital agency website, visually similar to the analogue from the UK.

A feature of the project was a vivid visual of cases, which we developed based on the client's source code.

51 agency

51 Agency

Atman specializes in creating visually stunning and highly functional websites. Let's make a Webflow site together!

Discover symbols websites built by the Webflow community

Discover symbols websites built by the Webflow community