A few small files.
A useful place to start.
Your pack includes eight original SVG icons, one service process diagram and one overview sheet. Open the browser page, try your colours and take the file you need.
Start with the browser page
- Extract the ZIP into a folder. Keep the supplied files together.
- Open index.html in a web browser. The artwork and colour tools work offline.
- Choose Ink and Accent. Every preview changes together. Reset colours brings back the supplied ink-blue and berry-red colours.
- Choose Download to save the coloured SVG, or Copy SVG to copy its source.
If your browser blocks clipboard access from a local file, the page opens and selects the SVG source for you. Press Ctrl+C on Windows or Cmd+C on macOS. You can also open View source and select the text yourself.
The colour controls change your exported copies. They leave the original files in assets/ untouched. Your browser's file-save settings decide where downloaded files are saved.
Find a file
| File | Useful for |
|---|---|
assets/book.svg | Reading lists and resources |
assets/open-note.svg | Notes and learning materials |
assets/calendar.svg | Dates and booking details |
assets/message.svg | Contact and conversations |
assets/link.svg | Related pages and references |
assets/download.svg | File-download actions |
assets/spark.svg | Ideas and new additions |
assets/compass.svg | Direction and navigation |
assets/service-flow.svg | A Brief → Make → Refine → Deliver process |
assets/overview.svg | The complete set on one sheet |
The three remaining files are index.html, this guide and LICENSE.html. That makes 13 files in the package.
Use an SVG on your website
Upload an individual SVG wherever your website builder accepts SVG images. Keep its width and height in proportion. In code, you can use it as an image, such as <img src="assets/book.svg" alt="Reading resources">.
When your editor supports SVG source or vector import, you can try its paste or import command with the copied source. The exact editing controls depend on that editor. This pack is plain SVG; it does not install a linked icon library or a Framer code component.
Start with an icon at 24 px beside 16 px text. Leave around 8–12 px between the icon and its label. For a larger section heading, try 32 or 40 px. Resize the complete SVG instead of stretching its paths.
Edit the artwork directly
Open an SVG in a vector editor, or open it as text. The default colours are #183347 for ink and #A5274D for the accent. Replace either hex value throughout that file to change its colour.
The eight icons share viewBox="0 0 24 24", stroke-width="2", rounded line ends and rounded joins. At 24 px wide, the 2-unit stroke appears as 2 px. A proportional resize to 48 px makes that stroke 4 px. Keep the same stroke setting across a group for a consistent look.
The service diagram uses a 480 × 760 viewBox. Its four steps run from top to bottom so the labels remain readable on a narrow page. Change the visible <text> labels in a text or vector editor to suit your process. The diagram and overview use Arial with Helvetica and sans-serif fallbacks. A vector editor can convert text to outlines if you need identical lettering on every device.
Keep the meaning visible
Pair important actions with a readable label. The download icon can support a button called “Download the guide”; the icon alone should not make people guess.
Give an informative image a useful alt description. If an icon repeats nearby text, use alt="" for an image or aria-hidden="true" for an inline decorative SVG. If you paste the same inline SVG several times, make the title IDs unique or use your site's own accessible label.
Use it, then keep going
The free-use license allows use in multiple completed personal, commercial and client websites. Attribution is optional. The original assets stay part of this pack, so keep them out of bundles or source libraries you resell.
For more visual vocabulary, explore the full 36-icon Service Icons pack or 12-diagram Service Maps pack. The small details can have company.
If a file needs a fix
Use the existing Wuren Studio discussion to report a reproducible file issue. Include the file name, your browser or editor and the steps that show the problem. This guide covers routine changes; custom artwork, project edits and one-to-one lessons are outside this free pack.