Add new icons for picture login Kolibri feature

[LianaHarris360]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Kolibri is adding a picture passcode login feature for pre-literate learners. A set of 24 icons, 12 in a standard line style and 12 in a colorful style, should be registered in KDS so they can be rendered as KIcons across Kolibri's login, coach, and facility plugins.

Complexity: Medium

Context

These icons are needed to support the Picture Login feature designs. Reference designs can be found in the Figma file

• Note: The new leaf icon is distinct from the current pointsActive icon
• For guidance on adding icons, see:
  • dev_docs/05_icons.md - Step-by-step process for adding new icons
  • custom-icons/readme.md - Custom icons should follow Material guidelines for geometry, keylines, and layout

The Change

Add twenty-four new icons to support the Picture Passcode Login feature:

1. Register all 24 icons in the KDS icon registry following the existing process for adding new icons. Use a consistent naming convention that pairs each concept with its style variant. The colorful versions should use the bare concept name and the monochrome, standard line versions append a suffix. For example: tree and tree_standard, moon and moon_standard. This convention must be applied uniformly across all 12 concept pairs.
2. Update the KDS icon documentation at docs/pages/icons/IconTable.vue to include the new icons, grouped under a "Picture Passcodes" category.

How to Get There

To view & verify that the new icons have been added correctly:

1. Run yarn dev to start the development server
2. Navigate to http://localhost:4000/icons#icons to see the icons list
3. After adding icons, run yarn run precompile-custom-svgs and yarn run pregenerate

Acceptance Criteria

• 24 new SVG files added to custom-icons/ and the naming convention is consistent across all 12 pairs
• Icons follow Material Design guidelines for geometry, keylines, and layout
• Each icon registered in lib/KIcon/iconDefinitions.js with the picturePasscode: true property
• Icons added to docs/pages/icons/IconTable.vue & appear correctly in KDS documentation under a "Picture Passcodes" category
• yarn run precompile-custom-svgs runs successfully
• yarn run pregenerate runs successfully

Testing

• Ensure that the colorful SVGs use only their designed fixed palette and do not inherit or respond to any KDS theme color tokens. They should render identically regardless of KDS theme context.

References

• Figma: https://www.figma.com/design/ZNXancdqXCbCAPXmf6r1zi/Picture-login?node-id=768-12208&t=cJFRZiICBc64hHUR-4
• Related Kolibri issues:
  - Picture login kolibri#14021 - Parent epic
• Material Design icon guidelines: https://material.io/design/iconography/system-icons.html

AI usage

🤖 This issue was written with AI assistance, under supervision, review and final edits by [@LianaHarris360 ] 🤖