You are viewing a degraded version of this page. Please use a supported browser for the best reading experience.

Fleurons

Delight with ornament

Fleurons are an easy way add a little flare to your articles. This library takes advantage of Codex’s ability to easily insert inline SVG images into articles and style them with CSS.

How to Use

Include the fleurons as you would any inline asset on Codex by adding it’s name in curly brackets like { fleurons/penny-farthing.svg }.

The fleurons default to 150 pixels but their size can be controlled in CSS or using utility classes on the parent element.

.small

.big

Many of the fleurons also include classes on the paths used internally, so you can modify their appearance easily with CSS, often with just a line or two of code. SVG uses the stroke and fill properties to change the colors of elements and the fleurons here use a combination of properties, some elements taking stroke and others using fill. However, in all cases, both stroke and fill are set to the CSS property currentColor, so they match the text color and can be modified in CSS using the color property.

svg.penny-farthing .bike {
  fill: red;
}

svg.penny-farthing .front-wheel {
  stroke: green;
}

svg.penny-farthing .back-wheel {
  stroke: yellow;
}

Calligraphy

Dissipation

{ fleurons/dissipation.svg }

Loopy

{ fleurons/loopy.svg }

.inner

.outer

Vortex

{ fleurons/vortex.svg }

Spencer

{ fleurons/spencer.svg }

Tadpoles

{ fleurons/tadpoles.svg }

.vertical

.horizontal

Swoosh

{ fleurons/swoosh.svg }

Geometry

Southwest

{ fleurons/southwest.svg }

.center

.squiggle

ellipse

Inception

{ fleurons/inception.svg }

Circle Squares

{ fleurons/circle-squares.svg }

.center

.ring

Escher

{ fleurons/escher.svg }

.inner

.outer

Chrysler

{ fleurons/chrysler.svg }

.center

.side

Empire State

{ fleurons/empire-state.svg }

Crop Circle

{ fleurons/crop-circle.svg }

.big

.small

Crystal

{ fleurons/crystal.svg }

.triangle

Mandala

{ fleurons/mandala.svg }

Tiffany

{ fleurons/tiffany.svg }

Double Crystal

{ fleurons/double-crystal.svg }

Objects

Branch

{ fleurons/branch.svg }

Daisy

{ fleurons/daisy.svg }

Feather

{ fleurons/feather.svg }

Fern

{ fleurons/fern.svg }

Mariposa

{ fleurons/mariposa.svg }

Penny Farthing

{ fleurons/penny-farthing.svg }

.bike

.front-wheel

.back-wheel

Tree Mandala

{ fleurons/tree-mandala.svg }

Twig

{ fleurons/twig.svg }