Icons

Icons

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.

Adding icons

To add a new icon to the pattern library, follow these steps:

  1. Open your new SVG in a code editor and remove any superfluous code such as generated by meta. It should look like <svg><path>...</path></svg>. Open an existing SVG icon as an example.
  2. Check if the SVG has set colours (e.g. <path fill="#fff">). Replace any hard-coded colours with fill="currentColor". This will allow you to override the colour using CSS.
  3. Add the new SVG to /src/icons/.
  4. In the terminal, cd to the project and run gulp fractal:build.

SS Icon Set Conversion

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#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#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#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#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#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",
    "mollie",
    "nav-down",
    "nav-up",
    "notebook",
    "padlock",
    "paypal",
    "print",
    "repeat",
    "send",
    "share",
    "shuffle",
    "stripe",
    "stopwatch",
    "tag",
    "thumbsup",
    "trash",
    "user",
    "users",
    "video",
    "zoom",
    "tick"
  ]
}