CanPKU+ Icon Cheat SheetA visual reference for the standard icons used throughout CanPKU+ CE Shell pages. Locating the Icon FilesAll CanPKU+ website icons are stored in the CitySoft Image Library under:
/_data/global/images/canpkuicons/<filename>.png
Icon filenames are lowercase and use hyphens when more than one word is required.
For example:
Icon Colour GuideIcon colours help create consistency across the CARES framework. They guide design choices but do not prevent an icon from being used elsewhere when appropriate.
Orange
Commonly used for Community and Research content.
Blue
Commonly used for Advocacy, Education, and general website tools.
Pink
Primarily used for Support, giving, wellness, and people-focused resources.
Available IconsThe CARES pillar column identifies the most common use for each icon. It is guidance rather than a restriction.
Using an Icon in CE Shell CodingUse the standard image path and replace the filename with the selected icon.
<img src="/_data/global/images/canpkuicons/articles.png"
alt="Articles" style="width:56px; height:56px; object-fit:contain;">
Always include meaningful alternative text. Decorative icons that add no information may use Prompt for Creating a New CanPKU+ IconCopy and paste the prompt below when requesting a new icon. Replace the bracketed sections with the required information. Create one new CanPKU+ website icon.
The icon must match the existing CanPKU+ icon library.
Requested icon:
[NAME OF ICON]
Purpose:
[WHAT THE ICON SHOULD REPRESENT]
Typical CARES pillar:
[COMMUNITY, ADVOCACY, RESEARCH, EDUCATION, SUPPORT, OR ALL PILLARS]
Suggested filename:
[LOWERCASE-FILENAME].png
Design requirements:
- Use a simple airport or hospital wayfinding style.
- Use clean geometric shapes.
- Use outline styling rather than filled illustrations.
- Keep the design minimal and immediately recognizable at small sizes.
- Use a square format.
- Use a transparent background.
- Provide the final output as an individual PNG file.
- Use consistent stroke thickness and rounded line ends or corners.
- Do not use gradients, shadows, glow, texture, shading, or background colour.
- Do not use emojis.
- Do not add labels or text inside the image.
- Do not use hands unless specifically requested.
- Avoid visual symbols strongly associated with another organization or community unless specifically approved.
- Do not place multiple icon options in one image.
- Do not create a poster, mockup, infographic, contact sheet, or preview board.
- Create only the requested icon.
Use CanPKU+ brand colours:
- Blue: #002F65
- Orange: #F89829
- Pink: #CA006C
Colour guidance:
- Orange is commonly used for Community and Research.
- Blue is commonly used for Advocacy, Education, and general website tools.
- Pink is primarily used for Support, giving, and wellness.
Workflow:
1. Briefly describe the proposed visual concept in one sentence.
2. Wait for approval before generating the image.
3. After approval, create one individual transparent PNG.
4. Provide a direct download link.
5. Do not add additional redesign suggestions unless requested.
After approval, rename the final file using the lowercase filename and upload it to:
/_data/global/images/canpkuicons/
Administration note: Keep filenames lowercase. Use hyphens for multi-word filenames. Do not rename an existing icon without updating every page that references it. Add new icons to this cheat sheet after they are uploaded to the Image Library.
|
