Two icon sets, each one file: the UI icons come from Lucide (thin stroke, ISC licence), the pictograms are the building blocks of the Brand-Building Canvas. An icon is a short reference to its name, drawn by the browser in the size and colour of the surrounding text, so it follows the Skin. Click a tile to copy its code, then paste it into any text.
UI Icons
38 icons, Lucide lucide-static 1.62.0 ISC. New icons: download the single file from Lucide into icons/ui/ and run the sprite script.
arrow-down
arrow-left
arrow-right-long
arrow-right
arrow-up
calendar
check
chevron-down-bold
chevron-down
chevron-left-bold
chevron-left
chevron-right-bold
chevron-right
chevron-up-bold
chevron-up
circle-x
clock
copy
download
external-link
eye
home
info
link
map-pin
menu
phone
plus-bold
plus
printer
search
share-2
triangle-alert
upload
user
x-bold
x
Canvas Pictograms
15 pictograms of the Canvas building blocks. They fill their column and take the text colour; give the svg the viewBox of the pictogram so the height follows.
Brand Community
Brand Competence
Brand Culture
Brand Expression
Brand Face
Brand Persona
Brand Related Self
Brand Relationships
Brand Theme
Brand Touchpoints
Brand Vision
Functional Benefits
Key Customers
Key Differentiator
Prototypical User
Sample Code
<p>Read the guide <svg class="up-icon" aria-hidden="true"><use href="/themes/custom/upmarkit_theme/icons/sprite-ui.svg?v=1793146447#arrow-right"></use></svg></p>
<p><svg class="up-icon up-icon--lg" aria-hidden="true"><use href="/themes/custom/upmarkit_theme/icons/sprite-ui.svg?v=1793146447#download"></use></svg> Download</p>
<svg class="up-pictogram golden-width" viewBox="0 0 1576 724" aria-hidden="true"><use href="/themes/custom/upmarkit_theme/icons/sprite-pictogramme.svg?v=1793146447#brand-community"></use></svg>Empty Template
<svg class="up-icon" aria-hidden="true"><use href="/themes/custom/upmarkit_theme/icons/sprite-ui.svg#XXX"></use></svg>Empty Template with Options
<!-- size: up-icon--sm | (none) | up-icon--lg | up-icon--xl -->
<svg class="up-icon up-icon--lg" aria-hidden="true"><use href="/themes/custom/upmarkit_theme/icons/sprite-ui.svg#XXX"></use></svg>
<!-- pictogram: viewBox from the card; golden-width = 61.8 % of the column, centred -->
<svg class="up-pictogram golden-width" viewBox="XXX" aria-hidden="true"><use href="/themes/custom/upmarkit_theme/icons/sprite-pictogramme.svg#XXX"></use></svg>CSS Mask (Component Stylesheets Only)
/* pseudo-elements cannot hold <use>: same file as a mask, colour = background-color, size = box in em */
.my-component::before {
content: '';
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: var(--icon-XXX) center / contain no-repeat;
mask: var(--icon-XXX) center / contain no-repeat;
}