Zellige Compass Rose

About the Zellige Compass Rose Pattern

The Zellige Compass Rose is a seamlessly tiling geometric pattern in the Cultural & Ethnic category, part of the Moroccan Zellige Tile Patterns collection. Featuring geometric shapes with precise mathematical symmetry, making it ideal for technical, modern, and architectural design contexts. This pattern is available as a high-quality PNG tile optimised for seamless digital tiling, and as an SVG source file for Pro users who need infinitely scalable vector output. All EzeIcons patterns are original artwork, designed for professional use in web and print projects.

Moroccan compass rose tile with radiating pointed star in deep blue and gold for nautical Moroccan fusion, Mediterranean coastal, and riad courtyard design

How to Use the Zellige Compass Rose Pattern

Apply the Zellige Compass Rose pattern as a repeating background in web projects using the CSS snippet below. Set background-repeat: repeat to tile the pattern across any container, and adjust background-size to control the tile scale. For high-DPI displays, use the 256px PNG tile at a 128px display size (2x) to ensure sharp rendering across Retina and 4K screens.

In design tools such as Figma, Sketch, or Adobe XD, import the PNG tile and define it as a fill pattern on any layer. For print projects, Pro users can download the SVG tile and scale it to any resolution without quality loss. The pattern edges are precisely matched so there are no visible seams when tiled horizontally, vertically, or in both directions simultaneously.

Common use cases for the Zellige Compass Rose pattern include section backgrounds on landing pages, card backgrounds in dashboards, hero section textures, email template backgrounds, packaging design mockups, and social media graphics. The geometric style makes it particularly effective for cultural & ethnic applications where visual rhythm and consistency are important.

CSS Snippet

Copy and paste the snippet below to use the Zellige Compass Rose pattern as a CSS background in your project.

.pattern-bg {
  background-image: url('https://pub-df466c670471441ca9d7109816d217e0.r2.dev/patterns/zellige-compass-rose/preview-256.png');
  background-repeat: repeat;
  background-size: 256px;
}

Licence & Attribution

The Zellige Compass Rose pattern is available under the EzeIcons licence. Free accounts may download a 256px PNG tile with no attribution required. Pro and Team subscribers receive full SVG source access and may use the pattern in unlimited commercial projects. No royalties, no subscriptions per project — one Pro plan covers all your work.