HOUSE SIGILS

Set up House Sigils

No code needed. Every setting lives in the right panel.

Place an icon

Open Assets in the left panel, find House Sigils, and drag it onto the canvas. You can also copy any icon on the demo page and paste it into your own project. The component comes with it.

Pick a finish and an icon

Click the icon. In the right panel, choose a Finish (Soft, Hairline, Duotone, Glass, Clay, Pixel, Engraved, Sticker, Neon, Blueprint, Brutal, or Chrome) and an Icon from the list of 80.

Resize

Drag any corner on the canvas, or type a number in Size, from 12 to 512 px. Every icon is a true SVG vector, so it stays sharp at any size.

Inline or Tile

Set Frame to Inline for a bare mark in a nav or button. Set it to Tile to place the mark on its finish tile.

Change colors

Switch Mark, Accent, or Field from Finish to Custom and a color picker appears. Field is the background, and it shows when Frame is Tile or the Finish is Soft. Switch back to Finish to restore the original look.

Tips

Hairline, Neon, and Blueprint read best on dark or saturated backgrounds. Duotone, Engraved, and Brutal suit light ones. Each icon carries its name as an accessible label. To try another finish, duplicate the icon and change Finish.

Help

If something is not working, reply to your purchase email and we will sort it out.

Back to the demo

Create a free website with Framer, the website builder loved by startups, designers and agencies.