The icons are compiled using gulp-svg-symbols, which converts a bunch of svg files to a single svg file containing each one as a symbol.
To add a new icon to the pattern library, follow these steps:
<svg><path>...</path></svg>. Open an existing SVG icon as an example.<path fill="#fff">). Replace any hard-coded colours with fill="currentColor". This will allow you to override the colour using CSS./src/icons/.cd to the project and run gulp fractal:build.We’ve now moved the SS-Standard icon set to the pattern library. Not all icons have been migrated. The SS-Standard icon set is an icon font, so I used icoMoon to convert these. Import the font, select your desired icon(s), and it’ll spit out the required SVG code. You can then run through the steps above to add an icon to the pattern library.
<div class="icon-group">
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#modmore-logo"></use>
</svg>
<p class="icon-box__name">modmore-logo</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#modmore-icon"></use>
</svg>
<p class="icon-box__name">modmore-icon</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#sterc-icon"></use>
</svg>
<p class="icon-box__name">sterc-icon</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#sterc-text"></use>
</svg>
<p class="icon-box__name">sterc-text</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#treehill_studio-icon"></use>
</svg>
<p class="icon-box__name">treehill_studio-icon</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#treehill_studio-color-icon"></use>
</svg>
<p class="icon-box__name">treehill_studio-color-icon</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#agenda"></use>
</svg>
<p class="icon-box__name">agenda</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#commerce"></use>
</svg>
<p class="icon-box__name">commerce</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#contentblocks"></use>
</svg>
<p class="icon-box__name">contentblocks</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#formalicious"></use>
</svg>
<p class="icon-box__name">formalicious</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#moregallery"></use>
</svg>
<p class="icon-box__name">moregallery</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#redactor"></use>
</svg>
<p class="icon-box__name">redactor</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#simplecart"></use>
</svg>
<p class="icon-box__name">simplecart</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#digitalsignage"></use>
</svg>
<p class="icon-box__name">digitalsignage</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#seosuite"></use>
</svg>
<p class="icon-box__name">seosuite</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#verifylogin"></use>
</svg>
<p class="icon-box__name">verifylogin</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#alert"></use>
</svg>
<p class="icon-box__name">alert</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#authorize-net"></use>
</svg>
<p class="icon-box__name">authorize-net</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#building"></use>
</svg>
<p class="icon-box__name">building</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#card"></use>
</svg>
<p class="icon-box__name">card</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#chart"></use>
</svg>
<p class="icon-box__name">chart</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#chevron-down"></use>
</svg>
<p class="icon-box__name">chevron-down</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#clock"></use>
</svg>
<p class="icon-box__name">clock</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#cog"></use>
</svg>
<p class="icon-box__name">cog</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#database"></use>
</svg>
<p class="icon-box__name">database</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#download"></use>
</svg>
<p class="icon-box__name">download</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#experiment"></use>
</svg>
<p class="icon-box__name">experiment</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#feed"></use>
</svg>
<p class="icon-box__name">feed</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#femaleuser"></use>
</svg>
<p class="icon-box__name">femaleuser</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#file"></use>
</svg>
<p class="icon-box__name">file</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#file-pdf"></use>
</svg>
<p class="icon-box__name">file-pdf</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#flag"></use>
</svg>
<p class="icon-box__name">flag</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#gallery"></use>
</svg>
<p class="icon-box__name">gallery</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#globe"></use>
</svg>
<p class="icon-box__name">globe</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#help"></use>
</svg>
<p class="icon-box__name">help</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#home"></use>
</svg>
<p class="icon-box__name">home</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#info"></use>
</svg>
<p class="icon-box__name">info</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#key"></use>
</svg>
<p class="icon-box__name">key</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#layout"></use>
</svg>
<p class="icon-box__name">layout</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#lightbulb"></use>
</svg>
<p class="icon-box__name">lightbulb</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#link-arrow"></use>
</svg>
<p class="icon-box__name">link-arrow</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#long-arrow-left"></use>
</svg>
<p class="icon-box__name">long-arrow-left</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#long-arrow-right"></use>
</svg>
<p class="icon-box__name">long-arrow-right</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#mail"></use>
</svg>
<p class="icon-box__name">mail</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#mobile"></use>
</svg>
<p class="icon-box__name">mobile</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#modx-icon"></use>
</svg>
<p class="icon-box__name">modx-icon</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#modx-logo"></use>
</svg>
<p class="icon-box__name">modx-logo</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#mollie"></use>
</svg>
<p class="icon-box__name">mollie</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#nav-down"></use>
</svg>
<p class="icon-box__name">nav-down</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#nav-up"></use>
</svg>
<p class="icon-box__name">nav-up</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#notebook"></use>
</svg>
<p class="icon-box__name">notebook</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#ecologi"></use>
</svg>
<p class="icon-box__name">ecologi</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#padlock"></use>
</svg>
<p class="icon-box__name">padlock</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#paypal"></use>
</svg>
<p class="icon-box__name">paypal</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#plus"></use>
</svg>
<p class="icon-box__name">plus</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#print"></use>
</svg>
<p class="icon-box__name">print</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#repeat"></use>
</svg>
<p class="icon-box__name">repeat</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#send"></use>
</svg>
<p class="icon-box__name">send</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#share"></use>
</svg>
<p class="icon-box__name">share</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#shuffle"></use>
</svg>
<p class="icon-box__name">shuffle</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#slack-icon"></use>
</svg>
<p class="icon-box__name">slack-icon</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#slack-logo"></use>
</svg>
<p class="icon-box__name">slack-logo</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
<p class="icon-box__name">star</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#stripe"></use>
</svg>
<p class="icon-box__name">stripe</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#stopwatch"></use>
</svg>
<p class="icon-box__name">stopwatch</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#tag"></use>
</svg>
<p class="icon-box__name">tag</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#thumbsup"></use>
</svg>
<p class="icon-box__name">thumbsup</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#times"></use>
</svg>
<p class="icon-box__name">times</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#trash"></use>
</svg>
<p class="icon-box__name">trash</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#user"></use>
</svg>
<p class="icon-box__name">user</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#users"></use>
</svg>
<p class="icon-box__name">users</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#video"></use>
</svg>
<p class="icon-box__name">video</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#zoom"></use>
</svg>
<p class="icon-box__name">zoom</p>
</div>
<div class="icon-box">
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#tick"></use>
</svg>
<p class="icon-box__name">tick</p>
</div>
</div>
{
"icons": [
"modmore-logo",
"modmore-icon",
"sterc-icon",
"sterc-text",
"treehill_studio-icon",
"treehill_studio-color-icon",
"agenda",
"commerce",
"contentblocks",
"formalicious",
"moregallery",
"redactor",
"simplecart",
"digitalsignage",
"seosuite",
"verifylogin",
"alert",
"authorize-net",
"building",
"card",
"chart",
"chevron-down",
"clock",
"cog",
"database",
"download",
"experiment",
"feed",
"femaleuser",
"file",
"file-pdf",
"flag",
"gallery",
"globe",
"help",
"home",
"info",
"key",
"layout",
"lightbulb",
"link-arrow",
"long-arrow-left",
"long-arrow-right",
"mail",
"mobile",
"modx-icon",
"modx-logo",
"mollie",
"nav-down",
"nav-up",
"notebook",
"ecologi",
"padlock",
"paypal",
"plus",
"print",
"repeat",
"send",
"share",
"shuffle",
"slack-icon",
"slack-logo",
"star",
"stripe",
"stopwatch",
"tag",
"thumbsup",
"times",
"trash",
"user",
"users",
"video",
"zoom",
"tick"
]
}